华为鸿蒙平台开发语言（华为鸿蒙应用开发）
华为鸿蒙平台开发语言（华为鸿蒙应用开发）基础组件badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content组件类型主要组件容器组件
在华为鸿蒙应用中，组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。
开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，也就是自定义组件。
在前面的章节中我们已经接触过一些组件了，比如div，text，buttont等，这就是组件，在HML文件中通过标签定义。标签是成对出现的，比如<text>你好！</text>，<button>点击我</button>。
一 组件分类根据组件的功能，可以分为以下六大类：
|
组件类型 |
主要组件 |
|
容器组件 |
badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content |
|
基础组件 |
button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle、web |
|
媒体组件 |
camera、video |
|
画布组件 |
canvas |
|
栅格组件 |
grid-container、grid-row、grid-col |
|
svg组件 |
svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform |
注：容器组件：用来对页面进行布局，可以包含若干个其它组件，例如我们在前面用到的<div></div>。
这章我们就来首先介绍常用的容器组件List。
二 常用容器组件List用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据，例如图片和文本。
List仅支持ListItem和ListItemGroup两个子组件。
ListItem：用来展示列表具体item。
ListItemGroup：用来展示分组，宽度默认充满list组件。使用该组件时父元素list组件的样式columns必须为1，否则功能异常。
下面我们就动手看看List具体是如何使用的。
1 创建List组件
启动DevEco Studio，选择欢迎界面左侧的Create Project（创建项目）菜单，选择Empty Ability（默认），选择下一步，进入配置项目界面，将项目名称命名为Components ，其它的默认即可，最后点击完成
在项目窗口，打开entry>src>js>default>pages>index>index.hml，写入下面的代码
<!-- index.hml -->
<div class="container">
<list>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
</list>
</div>
在项目窗口，打开entry>src>js>default>pages>index>index.css，写入下面的代码
/* index.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
}
.listItem{
height: 20%;
background-color:#d2e0e0;
margin-top: 20px;
}
打开预览器，查看效果
2 添加滚动条
设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。在项目窗口，打开entry>src>js>default>pages>index>index.hml，修改其代码如下：
<!-- index.hml -->
<div class="container">
<list class="listStyle" scrollbar="on" >
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
</list>
</div>
在项目窗口，打开entry>src>js>default>pages>index>index.css，修改其代码如下：
/* index.css */
.container {
flex-direction: column;
background-color: #F1F3F5;
}
.listItem{
height: 20%;
background-color:#d2e0e0;
margin-top: 20px;
}
.listStyle {
height: 100%;
scrollbar-color: #8e8b8b;
scrollbar-width: 50px;
}
在预览器中查看效果：
3 添加侧边索引栏
设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true 默认为字母索引表。修改index.hml的代码如下：
<!-- index.hml -->
<!-- index.hml -->
<div class="container">
<list class="listStyle" indexer="{{['#' '1' '2' '3' '4' '5' '6' '7' '8']}}" >
<list-item class="listItem" section="#" ></list-item>
<list-item class="listItem" section="1" ></list-item>
<list-item class="listItem" section="2" ></list-item>
<list-item class="listItem" section="3" ></list-item>
<list-item class="listItem" section="4" ></list-item>
<list-item class="listItem" section="5" ></list-item>
<list-item class="listItem" section="6" ></list-item>
<list-item class="listItem" section="7" ></list-item>
<list-item class="listItem" section="8" ></list-item>
</list>
</div>
修改index.css的代码如下：
/* index.css */
.container {
flex-direction: column;
width: 100%;
margin-top: 10px;
}
.listStyle{
height: 100%;
flex-direction: column;
columns: 1
}
.listItem {
height: 20%;
background-color: aquamarine;
margin-top: 20px;
}
在预览中运行程序，点击右侧的索引查看效果：
说明：
indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
indexer可以自定义索引表，自定义时"#"必须要存在。
4 分组列表
修改index.hml的代码如下：
<!-- index.hml -->
<div class="container">
<text class="title">分组列表</text>
<list class="listGroup">
<list-item-group>
<list-item><text class="group">分组列表</text></list-item>
<list-item><text class="groupValue">文本内容</text></list-item>
<list-item><text class="groupValue">文本内容</text></list-item>
<list-item><text class="groupValue">文本内容</text></list-item>
</list-item-group>
</list>
</div>
修改index.css的代码如下：
/* index.css */
.container {
flex-direction: column;
width: 100%;
margin-top: 10px;
}
.title {
height: 50px;
font-size: 16px;
color: grey;
margin-top: 40px;
margin-left: 30px;
}
.listGroup {
height: 400px;
}
.Group {
width: 96%;
height: 60px;
padding-left: 3%;
margin-left: 6%;
border-bottom: 1px solid #DEDEDE;
font-size: 20px;
font-weight:500;
}
.groupValue{
font-size: 16px;
width: 95%;
height: 60px;
margin-left: 15%;
border-bottom: 1px solid #DEDEDE;
}
在预览器中查看效果，点击列表项可以将其展开和折叠。
最后，提醒大家：写程序最重要的是动手，敲代码越多越熟练，最后会成为高高手！
