「3.4 熟知的列表」闯荡HAP之单一列表和组装列表_HAP

 

  •  ● 在一个文件夹里会罗列出很多个子文件夹或者文件,包含文件名、文件大小、文件修改日期、文件类型等;
  •  ● 在一个内容网站里会罗列出很多条内容,或许还要翻页,包含文章标题、文章作者、发表时间、浏览量等;
  •  ● 在一个图册网站,里面会罗列出很多图集或者图片,包含图集名称、图集作者等;
  •  ● 在一个音乐播放器的具体某类歌曲中,会罗列出很多歌曲,包含歌名、作者、所属歌集、时长等;

 

还有很多想类似的情况,这里就不一一列举了。通过上面四个场景,我们可以发现一个共同的特点,它们都有很多条数据,每个场景中数据的属性是相同的。这就让我想起了在学习Java 的数组时,对于一维数组,其元素的类型是相同的,你不可能定义了一个整形的数组,向里面添加了字符串类型的元素,这是不行的。假如我们需要做一个新闻类的展示界面,那么我们的数据中,每个元素中的属性必须是一样的。比如我们的元素属性包含标题、作者、内容摘要、封面图、发布时间、浏览记录、点赞量、评论量,但是在这个列表中存在一个特殊的元素,它的属性为歌曲名称、作者、歌集、时长,那么我们在展示这个数据集的时候,会出现什么问题呢(这里不做详细说明了,也许你已经知道答案是什么了)?

 

对于ListContainer组件的理论不在这里做赘述了,官文已经说得很明白了,本节将结合OkHttp插件,来使用ListContainer组件做一个简单的新闻展示Demo。

 

在开始复杂的列表展示页之前,我们先来做一个简单的列表展示,在学习Android的时候,列表有个展示水果的示例,我将在HarmonyOS智慧屏上实现这个小示例。

       一、单一的列表         

1、在layout目录下新建fruit_layout.xml文件,并创建ListContainer组件,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <ListContainer
        ohos:id="$+id:fruit_list"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>

 

2、接着在layout目录新建element_layout.xml文件,作为ListContainer组件的子布局,代码如下:

<?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:background_element="$graphic:background_element"
    ohos:bottom_margin="4vp"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:element_index"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="4vp"
        ohos:text_size="30fp"
        ohos:layout_alignment="center"/>
</DirectionalLayout>

 

3、组建一个类型为String的List列表,最终呈现在UI界面上。

        List<String> fruits = new ArrayList<>();
        fruits.add("苹果");
        fruits.add("橘子");
        fruits.add("橙子");
        fruits.add("香蕉");
        fruits.add("梨");
        fruits.add("桃子");
        fruits.add("苹果梨");
        fruits.add("香蕉梨");
        fruits.add("冬桃");
        fruits.add("红葡萄");
        fruits.add("紫葡萄");
        fruits.add("黑葡萄");

 

4、ListContainer组件的每一行元素可以是不相同的数据,因此需要适配不同的数据结构,使其能够添加到ListContainer组件中,并以列表的形式呈现在UI界面上。ListContainer组件提供了setItemProvider(BaseItemProvider itemProvider)方法,用于设置要显示的ListContainer组件对象。创建FruitElementProvider类,并继承BaseItemProvider,重写其中的方法。


文章后续内容和相关附件可以点击下面的原文链接前往学习
原文链接:https://harmonyos.51cto.com/posts/2345#bkwz


想了解更多关于鸿蒙的内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#bkwz