日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
鴻蒙「3.4熟知的列表」闖蕩HAP之單-列表和組裝列表

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比徐聞網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式徐聞網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋徐聞地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

  • 在一個文件夾里會羅列出很多個子文件夾或者文件，包含文件名、文件大小、文件修改日期、文件類型等;
  • 在一個內(nèi)容網(wǎng)站里會羅列出很多條內(nèi)容，或許還要翻頁，包含文章標題、文章作者、發(fā)表時間、瀏覽量等;
  • 在一個圖冊網(wǎng)站，里面會羅列出很多圖集或者圖片，包含圖集名稱、圖集作者等;
  • 在一個音樂播放器的具體某類歌曲中，會羅列出很多歌曲，包含歌名、作者、所屬歌集、時長等;

還有很多想類似的情況，這里就不一一列舉了。通過上面四個場景，我們可以發(fā)現(xiàn)一個共同的特點，它們都有很多條數(shù)據(jù)，每個場景中數(shù)據(jù)的屬性是相同的。這就讓我想起了在學(xué)習(xí)Java 的數(shù)組時，對于一維數(shù)組，其元素的類型是相同的，你不可能定義了一個整形的數(shù)組，向里面添加了字符串類型的元素，這是不行的。假如我們需要做一個新聞類的展示界面，那么我們的數(shù)據(jù)中，每個元素中的屬性必須是一樣的。比如我們的元素屬性包含標題、作者、內(nèi)容摘要、封面圖、發(fā)布時間、瀏覽記錄、點贊量、評論量，但是在這個列表中存在一個特殊的元素，它的屬性為歌曲名稱、作者、歌集、時長，那么我們在展示這個數(shù)據(jù)集的時候，會出現(xiàn)什么問題呢(這里不做詳細說明了，也許你已經(jīng)知道答案是什么了)?

對于ListContainer組件的理論不在這里做贅述了，官文已經(jīng)說得很明白了，本節(jié)將結(jié)合OkHttp插件，來使用ListContainer組件做一個簡單的新聞?wù)故綝emo。

在開始復(fù)雜的列表展示頁之前，我們先來做一個簡單的列表展示，在學(xué)習(xí)Android的時候，列表有個展示水果的示例，我將在HarmonyOS智慧屏上實現(xiàn)這個小示例。

一、單一的列表

1、在layout目錄下新建fruit_layout.xml文件，并創(chuàng)建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列表，最終呈現(xiàn)在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組件的每一行元素可以是不相同的數(shù)據(jù)，因此需要適配不同的數(shù)據(jù)結(jié)構(gòu)，使其能夠添加到ListContainer組件中，并以列表的形式呈現(xiàn)在UI界面上。ListContainer組件提供了setItemProvider?(BaseItemProvider itemProvider)方法，用于設(shè)置要顯示的ListContainer組件對象。創(chuàng)建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的數(shù)據(jù)結(jié)構(gòu)，并添加點擊事件。

 
 
 
 
    
  
  
  
  
  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、運行查看效果。

二、組合復(fù)雜的列表

1、和單一列表不同之處在于元素的顯示和元素的屬性。單一列表中我使用了一個List ，復(fù)雜的列表中，我將根據(jù)請求API接口返回的數(shù)據(jù)類型進行數(shù)據(jù)結(jié)構(gòu)的組裝。在這之前我先要說說OkHttp如何引入，以及需要授予那些權(quán)限。

1)首先我們在build.gradle中引入OkHttp(本節(jié)并不是對OkHttp做詳細講解，這里只是簡單的使用)的版本，并點擊窗口上的Sync Now進行同步下載。

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

2)在config.json中配置INTENT權(quán)限。

 
 
 
 
    
  
  
  
  
  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調(diào)用方法。

 
 
 
 
    
  
  
  
  
  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、做好上面的準備之后，我使用天行數(shù)據(jù)的每日簡報API接口。先看一下調(diào)用接口返回的參數(shù)：

3、我們根據(jù)返回的參數(shù)來構(gòu)建我們的列表元素類。

 
 
 
 
    
  
  
  
  
  1. public class News {
    2. 
  
  
  
  
  2.     //新聞標題
    3. 
  
  
  
  
  3.     private String title;
    4. 
  
  
  
  
  4.     //簡報內(nèi)容
    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、創(chuàng)建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獲取數(shù)據(jù)并適配ListContainer的數(shù)據(jù)結(jié)構(gòu)，最后查看運行效果。

 
 
 
 
    
  
  
  
  
  1. /**
    2. 
  
  
  
  
  2.     * 復(fù)雜數(shù)據(jù)結(jié)構(gòu)
    3. 
  
  
  
  
  3.     */
    4. 
  
  
  
  
  4.    private void initNewsListContainer() {
    5. 
  
  
  
  
  5.        //在子線程中獲取數(shù)據(jù)
    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庫

?著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請訪問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz


文章名稱：鴻蒙「3.4熟知的列表」闖蕩HAP之單-列表和組裝列表
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/cochsee.html