自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

2020征文-手機圖解鴻蒙列表組件ListContainer

作者：張榮超
系統(tǒng)
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

[[360076]]

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

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

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

一、什么是ListContainer

ListContainer是用來呈現(xiàn)連續(xù)、多行數(shù)據(jù)的列表組件，包含一系列相同類型的列表項。如下圖所示：


二、ListContainer的架構(gòu)視圖

ListContainer的架構(gòu)視圖如下所示：

ListContainer作為列表，其中的列表項數(shù)據(jù)是由適配器Adapter提供的，適配器Adapter作為ListContainer和數(shù)據(jù)源之間的中介&橋梁，將數(shù)據(jù)源中的數(shù)據(jù)映射到要展示的ListContainer中，ListContainer負責(zé)以列表的形式顯示適配器Adapter提供的數(shù)據(jù)。

三、ListContainer的使用步驟

ListContainer的使用步驟主要包括：

1、創(chuàng)建ListContainer

2、創(chuàng)建列表項的布局

3、使用POJO類封裝數(shù)據(jù)源中與每個列表項對應(yīng)的數(shù)據(jù)

4、構(gòu)造數(shù)據(jù)源

5、構(gòu)造適配器Adapter

6、將數(shù)據(jù)源關(guān)聯(lián)到適配器Adapter

7、將適配器Adapter應(yīng)用到ListContainer

四、ListContainer的使用示例

示例的運行效果如下圖所示：

開發(fā)步驟如下：

1、創(chuàng)建ListContainer(ability_main.xml)

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:id="$+id:list_container" 
  4.  
  5. ohos:height="match_parent" 
  6.  
  7. ohos:width="match_parent"/> 

 2、創(chuàng)建列表項的布局(item.xml)

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:height="match_content" 
  4.  
  5. ohos:width="match_parent" 
  6.  
  7. ohos:orientation="vertical"> 
  8.  
  9.  
  10. ohos:id="$+id:name" 
  11.  
  12. ohos:height="50vp" 
  13.  
  14. ohos:width="match_parent" 
  15.  
  16. ohos:padding="5vp" 
  17.  
  18. ohos:auto_font_size="true" 
  19.  
  20. ohos:text_alignment="center"/> 
  21.  
  22.  
  23. ohos:height="1vp" 
  24.  
  25. ohos:width="match_parent" 
  26.  
  27. ohos:background_element="#CCCCCC"/> 

 3、使用POJO類封裝數(shù)據(jù)源中與每個列表項對應(yīng)的數(shù)據(jù)(Item.java)

POJO類指的是：只包含屬性和相應(yīng)的getter和setter，而沒有業(yè)務(wù)邏輯的類。

  1. public class Item { 
  2.  
  3. private String name; 
  4.  
  5. public Item(String name) { 
  6.  
  7. this.name = name; 
  8.  
  9. } 
  10.  
  11. public String getName() { 
  12.  
  13. return name; 
  14.  
  15. } 
  16.  
  17. public void setName(String name) { 
  18.  
  19. this.name = name; 
  20.  
  21. } 
  22.  
  23. } 

 4、構(gòu)造數(shù)據(jù)源(MainAbilitySlice.java) 

  1. public class MainAbilitySlice extends AbilitySlice { 
  2.  
  3. @Override 
  4.  
  5. public void onStart(Intent intent) { 
  6.  
  7. super.onStart(intent); 
  8.  
  9. super.setUIContent(ResourceTable.Layout_ability_main); 
  10.  
  11. List list = getData(); 
  12.  
  13. } 
  14.  
  15. private List getData() { 
  16.  
  17. List list = new ArrayList<>(); 
  18.  
  19. for (int i = 1; i <= 100; i++) { 
  20.  
  21. list.add(new Item("Item " + i)); 
  22.  
  23. } 
  24.  
  25. return list; 
  26.  
  27. } 
  28.  
  29. } 

 5、構(gòu)造適配器Adapter(MyItemProvider.java)

常用的適配器類是RecycleItemProvider，繼承該類時需要重寫四個方法：getCount()、getItem()、getItemId()和getComponent()。其中，對于方法getComponent()，當(dāng)某個列表項從不可見變?yōu)榭梢姇r會自動調(diào)用該方法，在該方法中適配器Adapter會從數(shù)據(jù)源取數(shù)據(jù)，并將返回的數(shù)據(jù)封裝在一個Component對象中，以便將該對象返回給ListContainer，從而將數(shù)據(jù)映射到對應(yīng)的列表項。

  1. public class MyItemProvider extends RecycleItemProvider { 
  2.  
  3. private List list; 
  4.  
  5. private AbilitySlice slice; 
  6.  
  7. public MyItemProvider(List list, AbilitySlice slice) { 
  8.  
  9. this.list = list; 
  10.  
  11. this.slice = slice; 
  12.  
  13. } 
  14.  
  15. @Override 
  16.  
  17. public int getCount() { 
  18.  
  19. return list.size(); 
  20.  
  21. } 
  22.  
  23. @Override 
  24.  
  25. public Object getItem(int position) { 
  26.  
  27. return list.get(position); 
  28.  
  29. } 
  30.  
  31. @Override 
  32.  
  33. public long getItemId(int position) { 
  34.  
  35. return position; 
  36.  
  37. } 
  38.  
  39. @Override 
  40.  
  41. public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { 
  42.  
  43. convertComponent = LayoutScatter.getInstance(slice) 
  44.  
  45. .parse(ResourceTable.Layout_item, null, false); 
  46.  
  47. Text text = (Text) convertComponent.findComponentById(ResourceTable.Id_name); 
  48.  
  49. text.setText(list.get(position).getName()); 
  50.  
  51. return convertComponent; 
  52.  
  53. } 
  54.  
  55. } 

 6、將數(shù)據(jù)源關(guān)聯(lián)到適配器Adapter(MainAbilitySlice.java) 

  1. public class MainAbilitySlice extends AbilitySlice { 
  2.  
  3. @Override 
  4.  
  5. public void onStart(Intent intent) { 
  6.  
  7. ...... 
  8.  
  9. List list = getData(); 
  10.  
  11. MyItemProvider myItemProvider = new MyItemProvider(list, this); 
  12.  
  13. } 
  14.  
  15. ...... 
  16.  
  17. } 

 7、將適配器Adapter應(yīng)用到ListContainer(MainAbilitySlice.java) 

  1. public class MainAbilitySlice extends AbilitySlice { 
  2.  
  3. @Override 
  4.  
  5. public void onStart(Intent intent) { 
  6.  
  7. ...... 
  8.  
  9. MyItemProvider myItemProvider = new MyItemProvider(list, this); 
  10.  
  11. ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container); 
  12.  
  13. listContainer.setItemProvider(myItemProvider); 
  14.  
  15. } 
  16.  
  17. ...... 
  18.  
  19. } 

 五、適配器Adapter的優(yōu)化

對于上面的第5步，當(dāng)某個列表項從不可見變?yōu)榭梢姇r，對于自動調(diào)用的方法getComponent()，我們是根據(jù)列表項的布局文件item.xml創(chuàng)建了一個列表項的實例。這樣的做法性能較差。因為系統(tǒng)會對變?yōu)椴豢梢姷牧斜眄棇嵗M行緩存，所以對于方法getComponent()中的第二個參數(shù)convertComponent有可能不為null。當(dāng)convertComponent不為null時，說明系統(tǒng)把緩存中的某個列表項實例傳遞過來了，因此，完全可以復(fù)用該列表項實例，而沒有必要重新創(chuàng)建一個列表項實例。優(yōu)化方式如下：

  1. public class MyItemProvider extends RecycleItemProvider { 
  2.  
  3. ...... 
  4.  
  5. @Override 
  6.  
  7. public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { 
  8.  
  9. if (convertComponent == null) { 
  10.  
  11. convertComponent = LayoutScatter.getInstance(slice) 
  12.  
  13. .parse(ResourceTable.Layout_item, null, false); 
  14.  
  15. } 
  16.  
  17. Text text = (Text) convertComponent.findComponentById(ResourceTable.Id_name); 
  18.  
  19. text.setText(list.get(position).getName()); 
  20.  
  21. return convertComponent; 
  22.  
  23. } 
  24.  
  25. } 

 六、使用ViewHolder對適配器Adapter做終極優(yōu)化

在上面的代碼中，得到列表項實例后(不管是新創(chuàng)建的列表項實例，還是從緩存中獲得的列表項實例)，都要調(diào)用方法findComponentById()以獲得列表項中的子組件。調(diào)用方法findComponentById()是比較耗費性能的，所以好的做法是：在新創(chuàng)建列表項實例時，就調(diào)用方法findComponentById()以獲得列表項中的所有子組件，并且將所有子組件通過ViewHolder綁定到列表項實例。這樣，當(dāng)從緩存中獲得列表項實例后，就無需再調(diào)用方法findComponentById()了，直接獲得列表項實例綁定的ViewHolder就可以得到所有子組件了。優(yōu)化方式如下：

  1. public class MyItemProvider extends RecycleItemProvider { 
  2.  
  3. ...... 
  4.  
  5. @Override 
  6.  
  7. public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { 
  8.  
  9. ViewHolder viewHolder; 
  10.  
  11. if (convertComponent == null) { 
  12.  
  13. convertComponent = LayoutScatter.getInstance(slice) 
  14.  
  15. .parse(ResourceTable.Layout_item, null, false); 
  16.  
  17. viewHolder = new ViewHolder(); 
  18.  
  19. viewHolder.text = (Text) convertComponent.findComponentById(ResourceTable.Id_name); 
  20.  
  21. convertComponent.setTag(viewHolder); 
  22.  
  23. } else { 
  24.  
  25. viewHolder = (ViewHolder) convertComponent.getTag(); 
  26.  
  27. } 
  28.  
  29. viewHolder.text.setText(list.get(position).getName()); 
  30.  
  31. return convertComponent; 
  32.  
  33. } 
  34.  
  35. class ViewHolder { 
  36.  
  37. Text text; 
  38.  
  39. } 
  40.  
  41. } 

 如果你理解了為什么要這么優(yōu)化，相信你會發(fā)現(xiàn)：當(dāng)列表項中只有一個子組件時，也可以不引入ViewHolder，而是將這個子組件直接綁定到列表項實例。代碼如下所示：

  1. public class MyItemProvider extends RecycleItemProvider { 
  2.  
  3. ...... 
  4.  
  5. @Override 
  6.  
  7. public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { 
  8.  
  9. Text text; 
  10.  
  11. if (convertComponent == null) { 
  12.  
  13. convertComponent = LayoutScatter.getInstance(slice) 
  14.  
  15. .parse(ResourceTable.Layout_item, null, false); 
  16.  
  17. text = (Text) convertComponent.findComponentById(ResourceTable.Id_name); 
  18.  
  19. convertComponent.setTag(text); 
  20.  
  21. } else { 
  22.  
  23. text = (Text) convertComponent.getTag(); 
  24.  
  25. } 
  26.  
  27. text.setText(list.get(position).getName()); 
  28.  
  29. return convertComponent; 
  30.  
  31. } 
  32.  
  33. } 

 示例源代碼，請見附件。

歡迎訂閱我的專欄【圖解鴻蒙】：

https://harmonyos.51cto.com/column/27

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

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

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

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

 

責(zé)任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOSListContainer
相關(guān)推薦

2021-08-12 14:59:15

鴻蒙HarmonyOS應(yīng)用

2020-12-22 11:09:20

鴻蒙Feature AbiAbilitySlic

2020-12-28 11:19:06

鴻蒙HarmonyOSPage Abilit

2020-12-04 12:42:59

組件鴻蒙Text

2020-12-23 11:36:23

鴻蒙HarmonyOS應(yīng)用程序開發(fā)

2020-12-22 09:48:18

鴻蒙HarmonyOS應(yīng)用程序

2020-12-23 11:24:34

鴻蒙開發(fā)IDE安裝

2020-12-22 11:20:36

鴻蒙HarmonyOS游戲

2020-12-23 11:45:27

鴻蒙HarmonyOSTextField組件

2020-12-28 11:30:07

鴻蒙HarmonyOS分布式

2020-12-25 10:39:53

鴻蒙開發(fā)JS

2021-08-25 09:49:48

鴻蒙HarmonyOS應(yīng)用

2020-12-24 11:24:31

鴻蒙開發(fā)JS

2020-12-24 10:05:54

鴻蒙鴻蒙開發(fā)Hello World

2020-12-09 11:53:24

鴻蒙開發(fā)HelloWord

2020-12-29 09:59:01

鴻蒙HarmonyOS智能家居

2022-04-24 15:17:56

鴻蒙操作系統(tǒng)

2020-12-15 11:57:49

Hi3861 HarmonyOS開發(fā)板

2020-12-18 11:05:25

鴻蒙HarmonyOS游戲

2020-12-14 09:58:28

鴻蒙HarmonyOS手表游戲
點贊
收藏

51CTO技術(shù)棧公眾號