自学鸿蒙应用开发（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源创计划”，欢迎正在阅读的你也加入，一块儿分享。