鸿蒙「3.4熟知的列表」闯荡HAP之单-列表和组装列表

想了解更多内容，请访问：

创新互联建站-专业网站定制、快速模板网站建设、高性价比徐闻网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式徐闻网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖徐闻地区。费用合理售后完善，10余年实体公司更值得信赖。

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

https://harmonyos./#zz

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

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

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

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

一、单一的列表

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_parent"
    5. 
  
  
  
  
  5.     ohos:width="match_parent"
    6. 
  
  
  
  
  6.     ohos:orientation="vertical">
    7. 
  
  
  
  
  7.     
  
  
  
  
  8.         ohos:id="$+id:fruit_list"
    9. 
  
  
  
  
  9.         ohos:height="match_parent"
    10. 
  
  
  
  
  10.         ohos:width="match_parent"
    11. 
  
  
  
  
  11.         ohos:layout_alignment="horizontal_center"/>
    12. 
  
  
  
  
  12.

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:width="match_parent"
    6. 
  
  
  
  
  6.     ohos:background_element="$graphic:background_element"
    7. 
  
  
  
  
  7.     ohos:bottom_margin="4vp"
    8. 
  
  
  
  
  8.     ohos:orientation="vertical">
    9. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:id="$+id:element_index"
    11. 
  
  
  
  
  11.         ohos:height="match_content"
    12. 
  
  
  
  
  12.         ohos:width="match_content"
    13. 
  
  
  
  
  13.         ohos:padding="4vp"
    14. 
  
  
  
  
  14.         ohos:text_size="30fp"
    15. 
  
  
  
  
  15.         ohos:layout_alignment="center"/>
    16. 
  
  
  
  
  16.

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

 
 
 
 
    
  
  
  
  
  1. List fruits = new ArrayList<>();
    2. 
  
  
  
  
  2.    fruits.add("苹果");
    3. 
  
  
  
  
  3.    fruits.add("橘子");
    4. 
  
  
  
  
  4.    fruits.add("橙子");
    5. 
  
  
  
  
  5.    fruits.add("香蕉");
    6. 
  
  
  
  
  6.    fruits.add("梨");
    7. 
  
  
  
  
  7.    fruits.add("桃子");
    8. 
  
  
  
  
  8.    fruits.add("苹果梨");
    9. 
  
  
  
  
  9.    fruits.add("香蕉梨");
    10. 
  
  
  
  
  10.    fruits.add("冬桃");
    11. 
  
  
  
  
  11.    fruits.add("红葡萄");
    12. 
  
  
  
  
  12.    fruits.add("紫葡萄");
    13. 
  
  
  
  
  13.    fruits.add("黑葡萄");
    14.

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

 
 
 
 
    
  
  
  
  
  1. package com.ming.harmonyos.newsapp.domain;
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. import com.ming.harmonyos.newsapp.ResourceTable;
    4. 
  
  
  
  
  4. import ohos.aafwk.ability.AbilitySlice;
    5. 
  
  
  
  
  5. import ohos.agp.components.*;
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. import java.util.List;
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. public class FruitElementProvider extends BaseItemProvider {
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     private List list;
    12. 
  
  
  
  
  12. 
  
  
  
  
  13.     private AbilitySlice slice;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.     public FruitElementProvider(List fruits, AbilitySlice slice) {
    16. 
  
  
  
  
  16.         this.list = fruits;
    17. 
  
  
  
  
  17.         this.slice = slice;
    18. 
  
  
  
  
  18.     }
    19. 
  
  
  
  
  19. 
  
  
  
  
  20.     @Override
    21. 
  
  
  
  
  21.     public int getCount() {
    22. 
  
  
  
  
  22.         return list.size();
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24. 
  
  
  
  
  25.     @Override
    26. 
  
  
  
  
  26.     public Object getItem(int i) {
    27. 
  
  
  
  
  27.         return list.get(i);
    28. 
  
  
  
  
  28.     }
    29. 
  
  
  
  
  29. 
  
  
  
  
  30.     @Override
    31. 
  
  
  
  
  31.     public long getItemId(int i) {
    32. 
  
  
  
  
  32.         return i;
    33. 
  
  
  
  
  33.     }
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     @Override
    36. 
  
  
  
  
  36.     public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
    37. 
  
  
  
  
  37.         Component cpt = component;
    38. 
  
  
  
  
  38.         if (cpt == null) {
    39. 
  
  
  
  
  39.             cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_element_layout, null, false);
    40. 
  
  
  
  
  40.         }
    41. 
  
  
  
  
  41.         String fruit = list.get(i);
    42. 
  
  
  
  
  42.         Text text = (Text) cpt.findComponentById(ResourceTable.Id_element_index);
    43. 
  
  
  
  
  43.         text.setText(fruit);
    44. 
  
  
  
  
  44.         return cpt;
    45. 
  
  
  
  
  45.     }
    46. 
  
  
  
  
  46. }
    47.

 5、在MainAbility中适配ListContainer的数据结构，并添加点击事件。

 
 
 
 
    
  
  
  
  
  1. ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_fruit_list);
    2. 
  
  
  
  
  2.        List fruits = new ArrayList<>();
    3. 
  
  
  
  
  3.        fruits.add("苹果");
    4. 
  
  
  
  
  4.        fruits.add("橘子");
    5. 
  
  
  
  
  5.        fruits.add("橙子");
    6. 
  
  
  
  
  6.        fruits.add("香蕉");
    7. 
  
  
  
  
  7.        fruits.add("梨");
    8. 
  
  
  
  
  8.        fruits.add("桃子");
    9. 
  
  
  
  
  9.        fruits.add("苹果梨");
    10. 
  
  
  
  
  10.        fruits.add("香蕉梨");
    11. 
  
  
  
  
  11.        fruits.add("冬桃");
    12. 
  
  
  
  
  12.        fruits.add("红葡萄");
    13. 
  
  
  
  
  13.        fruits.add("紫葡萄");
    14. 
  
  
  
  
  14.        fruits.add("黑葡萄");
    15. 
  
  
  
  
  15.        FruitElementProvider fruitElementProvider = new FruitElementProvider(fruits, this);
    16. 
  
  
  
  
  16.        listContainer.setItemProvider(fruitElementProvider);
    17. 
  
  
  
  
  17.        listContainer.setItemClickedListener((listContainer1, component, position, id) -> {
    18. 
  
  
  
  
  18.            String item = (String) listContainer1.getItemProvider().getItem(position);
    19. 
  
  
  
  
  19.            new ToastDialog(getContext())
    20. 
  
  
  
  
  20.                    .setText("点击了:" + item)
    21. 
  
  
  
  
  21.                    // Toast显示在界面中间
    22. 
  
  
  
  
  22.                    .setAlignment(LayoutAlignment.CENTER)
    23. 
  
  
  
  
  23.                    .show();
    24. 
  
  
  
  
  24.        });
    25.

 6、运行查看效果。

二、组合复杂的列表

1、和单一列表不同之处在于元素的显示和元素的属性。单一列表中我使用了一个List ，复杂的列表中，我将根据请求API接口返回的数据类型进行数据结构的组装。在这之前我先要说说OkHttp如何引入，以及需要授予那些权限。

1)首先我们在build.gradle中引入OkHttp(本节并不是对OkHttp做详细讲解，这里只是简单的使用)的版本，并点击窗口上的Sync Now进行同步下载。

 
 
 
 
    
  
  
  
  
  1. implementation("com.squareup.okhttp3:okhttp:4.9.0")
    2.

2)在config.json中配置INTENT权限。

 
 
 
 
    
  
  
  
  
  1. "reqPermissions": [
    2. 
  
  
  
  
  2.       {
    3. 
  
  
  
  
  3.         "name": "ohos.permission.INTERNET",
    4. 
  
  
  
  
  4.         "usedScene": {
    5. 
  
  
  
  
  5.           "ability": [
    6. 
  
  
  
  
  6.             "com.ming.harmonyos.newsapp.MainAbility"
    7. 
  
  
  
  
  7.           ],
    8. 
  
  
  
  
  8.           "when": "always"
    9. 
  
  
  
  
  9.         }
    10. 
  
  
  
  
  10.       }
    11. 
  
  
  
  
  11.     ]
    12.

 3)在MainAbilitySlice中实例化OkHttpClient对象，并封装它的GET调用方法。

 
 
 
 
    
  
  
  
  
  1. private OkHttpClient client = new OkHttpClient();
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.    private String run(String url) throws IOException {
    4. 
  
  
  
  
  4.        Request request = new Request.Builder()
    5. 
  
  
  
  
  5.                .url(url)
    6. 
  
  
  
  
  6.                .build();
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.        try (Response response = client.newCall(request).execute()) {
    9. 
  
  
  
  
  9.            return response.body().string();
    10. 
  
  
  
  
  10.        }
    11. 
  
  
  
  
  11.    }
    12.

 2、做好上面的准备之后，我使用天行数据的每日简报API接口。先看一下调用接口返回的参数：

3、我们根据返回的参数来构建我们的列表元素类。

 
 
 
 
    
  
  
  
  
  1. public class News {
    2. 
  
  
  
  
  2.     //新闻标题
    3. 
  
  
  
  
  3.     private String title;
    4. 
  
  
  
  
  4.     //简报内容
    5. 
  
  
  
  
  5.     private String digest;
    6. 
  
  
  
  
  6.     //简报封面
    7. 
  
  
  
  
  7.     private String imgsrc;
    8. 
  
  
  
  
  8.     //简报链接
    9. 
  
  
  
  
  9.     private String url;
    10. 
  
  
  
  
  10.     //简报来源
    11. 
  
  
  
  
  11.     private String source;
    12. 
  
  
  
  
  12.     //新闻时间
    13. 
  
  
  
  
  13.     private String mtime;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.    //getter & setter
    16. 
  
  
  
  
  16. }
    17.

 4、在layout目录新建news_element_layout.xml文件，作为ListContainer组件的子布局，代码如下：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
    4. 
  
  
  
  
  4.     ohos:height="match_content"
    5. 
  
  
  
  
  5.     ohos:width="match_parent"
    6. 
  
  
  
  
  6.     ohos:bottom_margin="4vp"
    7. 
  
  
  
  
  7.     ohos:orientation="vertical">
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.     
  
  
  
  
  10.         ohos:height="match_parent"
    11. 
  
  
  
  
  11.         ohos:width="match_parent"
    12. 
  
  
  
  
  12.         ohos:background_element="$graphic:background_element"
    13. 
  
  
  
  
  13.         ohos:orientation="horizontal">
    14. 
  
  
  
  
  14.         
  
  
  
  
  15.             ohos:id="$+id:news_imgsrc"
    16. 
  
  
  
  
  16.             ohos:image_src="$media:icon"
    17. 
  
  
  
  
  17.             ohos:height="100vp"
    18. 
  
  
  
  
  18.             ohos:width="100vp"/>
    19. 
  
  
  
  
  19.         
  
  
  
  
  20.             ohos:height="match_parent"
    21. 
  
  
  
  
  21.             ohos:width="match_parent">
    22. 
  
  
  
  
  22.             
  
  
  
  
  23.                 ohos:id="$+id:news_title"
    24. 
  
  
  
  
  24.                 ohos:height="match_parent"
    25. 
  
  
  
  
  25.                 ohos:width="match_parent"
    26. 
  
  
  
  
  26.                 ohos:weight="1"
    27. 
  
  
  
  
  27.                 ohos:text="我是标题"
    28. 
  
  
  
  
  28.                 ohos:text_size="20fp"/>
    29. 
  
  
  
  
  29.             
  
  
  
  
  30.                 ohos:id="$+id:news_remark"
    31. 
  
  
  
  
  31.                 ohos:height="match_parent"
    32. 
  
  
  
  
  32.                 ohos:width="match_parent"
    33. 
  
  
  
  
  33.                 ohos:weight="1"
    34. 
  
  
  
  
  34.                 ohos:text="我是摘要"
    35. 
  
  
  
  
  35.                 ohos:text_size="14fp"
    36. 
  
  
  
  
  36.                 ohos:multiple_lines="true"
    37. 
  
  
  
  
  37.                 ohos:max_text_lines="2"
    38. 
  
  
  
  
  38.                 ohos:text_color="#888888"/>
    39. 
  
  
  
  
  39.             
  
  
  
  
  40.                 ohos:height="match_parent"
    41. 
  
  
  
  
  41.                 ohos:width="match_parent"
    42. 
  
  
  
  
  42.                 ohos:weight="1">
    43. 
  
  
  
  
  43.                 
  
  
  
  
  44.                     ohos:id="$+id:news_source"
    45. 
  
  
  
  
  45.                     ohos:height="match_content"
    46. 
  
  
  
  
  46.                     ohos:width="match_content"
    47. 
  
  
  
  
  47.                     ohos:text="来源"
    48. 
  
  
  
  
  48.                     ohos:text_size="12fp"
    49. 
  
  
  
  
  49.                     ohos:text_color="#CCCCCC"
    50. 
  
  
  
  
  50.                     ohos:align_parent_left="true"/>
    51. 
  
  
  
  
  51.                 
  
  
  
  
  52.                     ohos:id="$+id:news_time"
    53. 
  
  
  
  
  53.                     ohos:height="match_content"
    54. 
  
  
  
  
  54.                     ohos:width="match_content"
    55. 
  
  
  
  
  55.                     ohos:text="时间"
    56. 
  
  
  
  
  56.                     ohos:text_size="12fp"
    57. 
  
  
  
  
  57.                     ohos:text_color="#CCCCCC"
    58. 
  
  
  
  
  58.                     ohos:right_padding="20vp"
    59. 
  
  
  
  
  59.                     ohos:align_parent_right="true"/>
    60. 
  
  
  
  
  60.             
    61. 
  
  
  
  
  61.         
    62. 
  
  
  
  
  62.     
    63. 
  
  
  
  
  63.

 5、创建NewsItemProvider类，并继承BaseItemProvider，重写其中的方法。

 
 
 
 
    
  
  
  
  
  1. @Override
    2. 
  
  
  
  
  2.   public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
    3. 
  
  
  
  
  3.       Component cpt = component;
    4. 
  
  
  
  
  4.       if (cpt == null) {
    5. 
  
  
  
  
  5.           cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_news_element_layout, null, false);
    6. 
  
  
  
  
  6.       }
    7. 
  
  
  
  
  7.       News news = list.get(i);
    8. 
  
  
  
  
  8.       //封面图
    9. 
  
  
  
  
  9.       Image image = (Image) cpt.findComponentById(ResourceTable.Id_news_imgsrc);
    10. 
  
  
  
  
  10.       
    11. 
  
  
  
  
  11.       //标题
    12. 
  
  
  
  
  12.       Text title = (Text) cpt.findComponentById(ResourceTable.Id_news_title);
    13. 
  
  
  
  
  13.       title.setText(news.getTitle());
    14. 
  
  
  
  
  14.       //摘要
    15. 
  
  
  
  
  15.       Text remark = (Text) cpt.findComponentById(ResourceTable.Id_news_remark);
    16. 
  
  
  
  
  16.       remark.setText(news.getDigest());
    17. 
  
  
  
  
  17.       //来源
    18. 
  
  
  
  
  18.       Text source = (Text) cpt.findComponentById(ResourceTable.Id_news_source);
    19. 
  
  
  
  
  19.       source.setText(news.getSource());
    20. 
  
  
  
  
  20.       //日期
    21. 
  
  
  
  
  21.       Text time = (Text) cpt.findComponentById(ResourceTable.Id_news_time);
    22. 
  
  
  
  
  22.       time.setText(news.getMtime());
    23. 
  
  
  
  
  23.       return cpt;
    24. 
  
  
  
  
  24.   }
    25.

 6、在MainAbility中使用OkHttp获取数据并适配ListContainer的数据结构，最后查看运行效果。

 
 
 
 
    
  
  
  
  
  1. /**
    2. 
  
  
  
  
  2.     * 复杂数据结构
    3. 
  
  
  
  
  3.     */
    4. 
  
  
  
  
  4.    private void initNewsListContainer() {
    5. 
  
  
  
  
  5.        //在子线程中获取数据
    6. 
  
  
  
  
  6.        new Thread(new Runnable() {
    7. 
  
  
  
  
  7.            @Override
    8. 
  
  
  
  
  8.            public void run() {
    9. 
  
  
  
  
  9.                try {
    10. 
  
  
  
  
  10.                    String response = MainAbilitySlice.this.run("https://api.tianapi.com/bulletin/index?key=您自己的KEY");
    11. 
  
  
  
  
  11.                    System.out.println(response);
    12. 
  
  
  
  
  12.                    JSONObject jsonObject = JSONObject.parseObject(response);
    13. 
  
  
  
  
  13.                    int code = Integer.valueOf(String.valueOf(jsonObject.get("code")));
    14. 
  
  
  
  
  14.                    String message = String.valueOf(jsonObject.get("msg"));
    15. 
  
  
  
  
  15.                    String data = String.valueOf(jsonObject.get("newslist"));
    16. 
  
  
  
  
  16.                    if (code == 200) {
    17. 
  
  
  
  
  17.                        List list = JSONArray.parseArray(data, News.class);
    18. 
  
  
  
  
  18.                        ListContainer news = (ListContainer) findComponentById(ResourceTable.Id_news_list);
    19. 
  
  
  
  
  19.                        NewsItemProvider nip = new NewsItemProvider(list, MainAbilitySlice.this);
    20. 
  
  
  
  
  20.                        news.setItemProvider(nip);
    21. 
  
  
  
  
  21.                    } else {
    22. 
  
  
  
  
  22.                        new ToastDialog(getContext())
    23. 
  
  
  
  
  23.                                .setText("抛出异常信息: " + message)
    24. 
  
  
  
  
  24.                                .setAlignment(LayoutAlignment.CENTER)
    25. 
  
  
  
  
  25.                                .show();
    26. 
  
  
  
  
  26.                    }
    27. 
  
  
  
  
  27.                } catch (Exception e) {
    28. 
  
  
  
  
  28.                    e.printStackTrace();
    29. 
  
  
  
  
  29.                }
    30. 
  
  
  
  
  30.            }
    31. 
  
  
  
  
  31.        }).start();
    32. 
  
  
  
  
  32.    }
    33.

我的HarmonyOS GitHub库

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

想了解更多内容，请访问：

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

https://harmonyos./#zz

文章名称：鸿蒙「3.4熟知的列表」闯荡HAP之单-列表和组装列表
网页链接：http://www.gawzjz.com/qtweb2/news17/24767.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

各行业网站

四川电信机房托管　　 　成都APP定制开发　　 　响应式网站建设　　 　域名注册　　 　四川网站建设　　 　成都网站制作　　 　网站建设开发　　 　网站设计制作　　 　迷你发光字　　 　广安做网站　　 　成都SEO优化　　 　眉山联通机房　　 　达州托管服务器　　 　蜜朵婚庆　　 　雅安主机托管　　 　成都网站建设　　 　SSL认证　　 　网站维护报价　　 　德阳东方电机技改　　 　微信网站开发