自學鴻蒙應用開發（16）- ListContainer

本文介紹在鴻蒙應用中ListContainer組件的基本用法。java

準備ListContainer頁面佈局
web

在layout目錄下的xml文件中建立ListContainer佈局，將其命名爲page_listcontainer.xml。編程

<?xml version="1.0" encoding="utf-8"?><ListContainer xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:list_container" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#EFEFEF" ohos:layout_alignment="horizontal_center" ohos:scrollbar_color="#0000FF" ohos:scrollbar_background_color="#7F7F7F" ohos:scrollbar_fading_enabled="false" ohos:scrollbar_thickness="20vp" />

代碼中組件id被指定爲list_container，頁面代碼中可使用這個id獲取ListContainer對象。最後幾個關於scrollbar的設定項目用於在畫面右側生成一個不會消失的滾動條，以顯示當前的滾動位置和範圍。設計模式

準備列表項佈局微信

開發者能夠爲列表項準備不一樣的佈局。首先在layout目錄下新建item_sample_red.xml文件，其內容是紅色、非傾斜字體，大小爲20fp：架構

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_content" ohos:width="match_parent" ohos:left_margin="16vp" ohos:right_margin="16vp" ohos:orientation="vertical"> <Text ohos:id="$+id:item_index" ohos:height="match_content" ohos:width="match_content" ohos:padding="4vp" ohos:text="Item0" ohos:text_size="20fp" ohos:text_color="#FF0000" ohos:layout_alignment="center"/></DirectionalLayout>

相似地，也能夠在layout目錄下新建item_sample_green.xml文件，其內容是綠色、傾斜字體，大小爲50fp：app

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_parent"ohos:left_margin="16vp"ohos:right_margin="16vp"ohos:orientation="vertical"><Text ohos:id="$+id:item_index" ohos:height="match_content" ohos:width="match_content" ohos:padding="4vp" ohos:text="Item0" ohos:text_size="50fp" ohos:text_color="#007F00" ohos:italic="true" ohos:layout_alignment="center"/></DirectionalLayout>

至此，佈局的準備就告一段落。
ide

準備列表模型類
工具

ListContainer在實際動做時，須要和一個列表數據類進行交互，這個類的最低需求是提供下面的接口佈局

方法	做用
int getCount()	返回填充的表項個數。
Object getItem(int position)	根據position返回對應的數據。
long getItemId(int position)	返回某一項的id。
Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer)	根據position返回對應的界面組件。

爲此這裏準備以下的SampleItemProvider類並實現上述接口：

ckage com.example.helloharmony;
import ohos.aafwk.ability.AbilitySlice;import ohos.agp.components.*;import java.util.List;
public class SampleItemProvider extends RecycleItemProvider { private List<SampleItem> list; private AbilitySlice slice; public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) { this.list = list; this.slice = slice; } @Override public int getCount() { return list.size(); } @Override public Object getItem(int position) { return list.get(position); } @Override public long getItemId(int position) { return position; } @Override public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { SampleItem sampleItem = list.get(position); Component cpt = convertComponent; if(cpt == null || cpt.getId() != sampleItem.getLayout()) { cpt = LayoutScatter.getInstance(slice).parse(sampleItem.getLayout(), null, false); } Text text = (Text) cpt.findComponentById(sampleItem.getItem()); text.setText(sampleItem.getName()); return cpt; }}

SampleItemProvider的主要功能是利用SampleItem列表項list的來實現ListContainer所需的接口。略微複雜一點的是getComponent方法，它利用SampleItem提供的信息生成畫面組件。開發者能夠根據實際須要調整該方法和SampleItem的設計。

生成列表數據

修改畫面類爲列表準備表示數據。

package com.example.helloharmony.slice;
import com.example.helloharmony.ResourceTable;import com.example.helloharmony.SampleItem;import com.example.helloharmony.SampleItemProvider;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.Component;import ohos.agp.components.ListContainer;
import java.util.ArrayList;import java.util.List;
public class ListAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_page_listcontainer); initListContainer(); } private void initListContainer() { ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container); listContainer.enableScrollBar(Component.AXIS_Y, true); listContainer.setScrollbarRoundRect(true); listContainer.setScrollbarRadius(listContainer.getScrollbarThickness() / 2); List<SampleItem> list = getData(); SampleItemProvider sampleItemProvider = new SampleItemProvider(list,this); listContainer.setItemProvider(sampleItemProvider); } private ArrayList<SampleItem> getData() { ArrayList<SampleItem> list = new ArrayList<>(); for (int i = 0; i <= 80; i++) { if((i % 2) == 0) { list.add(new SampleItem("Even" + i / 2, ResourceTable.Layout_item_sample_red, ResourceTable.Id_item_index)); } else { list.add(new SampleItem("Odd"+ i / 2, ResourceTable.Layout_item_sample_green, ResourceTable.Id_item_index)); } } return list; }

代碼16行~20行爲畫面指定ListContainer佈局以後，在initListContainer方法（第21行~第29行）中對ListContainer的滾動條進行控制並調用getData方法生成列表數據。getData簡單地根據索引的奇偶性生成不一樣文字，不一樣佈局的SampleItem。此處一樣代碼能夠根據實際開發的需求加以修改。

畫面顯示以下：

參考文檔

ListContainer組件

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-listcontainer-0000001060007847

ListContainer類

https://developer.harmonyos.com/cn/docs/documentation/doc-references/listcontainer-0000001054678718

新書介紹

《實戰Python設計模式》是做者最近出版的新書，拜託多多關注！

本書利用Python 的標準GUI 工具包tkinter，經過可執行的示例對23 個設計模式逐個進行說明。這樣一方面可使讀者瞭解真實的軟件開發工做中每一個設計模式的運用場景和想要解決的問題；另外一方面經過對這些問題的解決過程進行說明，讓讀者明白在編寫代碼時如何判斷使用設計模式的利弊，併合理運用設計模式。

對設計模式感興趣並且但願隨學隨用的讀者經過本書能夠快速跨越從理解到運用的門檻；但願學習Python GUI 編程的讀者能夠將本書中的示例做爲設計和開發的參考；使用Python 語言進行圖像分析、數據處理工做的讀者能夠直接以本書中的示例爲基礎，迅速構建本身的系統架構。

以爲本文有幫助？請分享給更多人。

關注微信公衆號【面向對象思考】輕鬆學習每一天！

面向對象開發，面向對象思考！

本文分享自微信公衆號 - 面向對象思考（OOThinkingDalian）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。