HarmonyOS开发，从listContainer说起容器控件的使用控件在生活中还是比较常见的，比如文件列表，图片轮播等等。2、容器控件有什么特点？容器控件主要负责包含真正的内容。通常，他们在界面上没有自己真实的“形象”。他们属于内容背后的绿叶，默默支撑着背后掌控者的荣耀。拿listContainer的示意图来说：假设我们有一个下载列表，做这样一个列表有两种方式，一种是hardcoding，把东西一个一个写在layout上，但是那显然是最低级最没脑子的做法，我们程序员都自称是高智商人才，总不能干那种蠢事吧？另一种高级方法是创建一个列表容器，将要显示的内容抽象成一个小布局，然后按顺序排列，塞入listContainer中。3.如何学习3.1准备你的布局内容首先看官方教程：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-listcontainer-0000001060007847这个教程很基础，介绍一个最基本的列表容器，但只是为了基础，如果你是app开发的新手，比如我，很容易搞糊涂，一看就不知道为什么，所以我觉得应该用我的方式解释这件事。4.准备工作首先设计你要展示的内容，比如下载列表，我们设计左边放一张图片，右边放两个控件，一个Text，最下面放一个进度条。这大概的意思是：首先把这个布局设计为：预览窗口看到这个：3.2PreparelistContainer有一个layout，必须有一个容器来装他，就像果树长出果实，有果实就必须有树但是这个东西没有界面，目前也没有办法预览。如果真要预览，就是这个界面。4.在下载列表的abilitySlice的onStart中初始化如果初始化函数：@OverrideprotectedvoidonStart(Intentintent){super.onStart(intent);setUIContent(ResourceTable.Layout_movie_containerlist);initDownloadListContainer();}privatevoidinitDownloadContainerList(){ListContainerlistBContainer=(ListContainer)findComponent(ResourceTable.Id_download_list);if(listContainer!=null){ArrayListlist=getData();down??loadItemProvideritemPro=newdownloadItemProvider(list,this);listContainer.setItemProvider(itemPro);}}看第10行，首先我们把listContainer获取了，为什么要获取呢，因为接下来要往里面塞东西。然后怎么塞，看第15行，我们在这个listContainer里面设置了一个叫做itemPro的东西，这里引入了一个Provider，这个provider负责为我们提供数据，这个provider的官方文档有几个简单的接口介绍:其他的都很好理解，就是最后一个有点乱。这是什么意思：您的listContainer中必须有很多项目，就像一个数组。如果我们要获取每个列表项中的图形控件，就得使用这个接口，不然大家长得都一样，你怎么知道你的数据结构对应的是哪个图形控件。这里我们看到itemPro的创建需要一个list作为参数，所以java中使用了ArrayList。我们来实现这个获取列表的接口：privateArrayListgetData(){ArrayListlist=newArrayList<>();for(inti=0;i<8;i++){downloadItemitem=newdownloadItem("亮剑-"+i+1);DirectionalLayoutlayout=(DirectionalLayout)LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_movie_item,null,false);item.setLayout(布局);item.setProgress(i*10);列表。add(item);}returnlist;}这个很好理解，就是创建一个列表，然后填入数据，这里比如我让每个列表显示不同的文字，然后分别显示不同的值进度条，只是回到过去。这里还涉及到另外一个东西，就是我们的downloadItem。这一项其实就是对应我们下载信息显示的具体信息。它是java中的一个类。首先创建一个结构类：publicclassdownloadItem{privatestaticfinalStringTAG=imageScannerSlice.class.getSimpleName();privatestaticfinalHiLogLabelLABEL_LOG=newHiLogLabel(HiLog.LOG_APP,0x00201,TAG);Stringname;Imageimage;intprogress;//[0-100]%DirectionalLayoutlayout;publicdownloadItem(Stringname){this.name=name;}publicvoiddownloadItem(Stringname,Imageimg){this.name=name;this.image=image;}publicvoidsetLayout(DirectionalLayoutlayout){if(layout==null){HiLog.error(LABEL_LOG,"setLayoutisNULL");return;}this.layout=layout;Texttext=(Text)layout.findComponentById(ResourceTable.Id_movie_name);text.setText(name);}publicvoidsetProgress(intprogress){if(progress<0)progress=0;if(progress>100)progress=100;this.progress=progress;if(layout==null){return;}ProgressBarprogressBar=(ProgressBar)layout.findComponentById(ResourceTable.Id_progressbar);progressBar.setProgressValue(progress);}}你可以看到我们在这里在每个结构中进行setLayout操作。这是为了匹配我们每个结构对应的图形控件。有了这个东西，就可以在Provider中的getComponent接口中填充数据了。整个提供者看起来像这样：=null?this.list.size():0;}@OverridepublicObjectgetItem(inti){if(this.list!=null&&i>0&&ilist;privateContextmContext;publicdownloadItemPageProvider(Listlist,Contextcontext){this.list=list;this.mContext=context;}@OverridepublicintgetCount(){returnlist.size();}@OverridepublicObjectcreatePageInContainer(ComponentContainercomponentContainer,inti){finaldownloadItemitem=list.get(i);//DirectionalLayoutlayout=newDirectionalLayout(mContext);//(DirectionalLayout)componentContainer.findComponentById(ResourceTable.Id_home_info);DirectionalLayoutlayout=(DirectionalLayout)LayoutScatter.getInstance(mContext).parse(ResourceTable.Layout_home_info,null,false);componentContainer.addComponent(layout);item.setLayout(layout);returnlayout;}@OverridepublicvoiddestroyPageFromContainer(ComponentContainercomponentContainer,inti,Objecto){componentContainer.removeComponent((Component)o);}@OverridepublicbooleanisPageMatchToObject(Componentcomponent,Objecto){//添加具体的处理逻辑//...returntrue;}}这个pageSlid的Provider和List的Provider的大体逻辑是类似的，但是有一些区别，就是这里需要实现createPageInContainer，而不是List的Provider中的getComponent接口，但是仔细观察我的代码,和前面的一模一样，然后修改初始化那里：);}这样你就可以很方便的做出一个左右滑动的页面滑块7总结一下，我觉得很自豪的一件事就是把数据结构绑定到图形控件，比官方的更容易使用。其实总结起来，做一个容器空间需要的过程就是：了解这个套路。你可以做出想要的效果。其实你也可以结合pageSilde和listContainer做出更复杂有趣的界面效果。我期待您的反馈。反馈。更多信息请访问：Harmonyos.51cto.com，与华为官方合作打造的鸿蒙技术社区
