自学鸿蒙应用开发（16）- ListContainer
自学鸿蒙应用开发（16）- ListContainer
本文介绍在鸿蒙应用中ListContainer组件的基本用法。
准备ListContainer页面布局
在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：
<?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="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;
}
@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