本文介绍在鸿蒙应用中ListContainer组件的基本用法。
<iframe allowfullscreen="true" data-mediaembed="tencent" id="dZHPhv0E-1624884685436" src="https://v.qq.com/txp/iframe/player.html?vid=m3255nyvngt"></iframe>ListContainer
准备ListContainer页面布局
在layout目录下的xml文件中创建ListContainer布局，将其命名为page_listcontainer.xml。
<?xml version="1.0" encoding="utf-8"?><ListContainerxmlns: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"?><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"><Textohos: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：
<?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"><Textohos: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>
至此，布局的准备就告一段落。
准备列表模型类
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;}@Overridepublic int getCount() {return list.size();}@Overridepublic Object getItem(int position) {return list.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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 {@Overridepublic 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 语言进行图像分析、数据处理工作的读者可以直接以本书中的示例为基础，迅速构建自己的系统架构。
觉得本文有帮助？请分享给更多人。
关注微信公众号【面向对象思考】轻松学习每一天！
面向对象开发，面向对象思考！