08. 快速上手！HarmonyOS4.0 List_ListItem_ListItemGroup 组件详解（二） ...

本章内容概要

返回按钮

在List组件详解（一） 中我们已经将基础的框架搭建好了。 接下来为了方便， 我们在子组件编写一个返回的按钮 ，代码如下

1. /**
2. * @Author: 若城
3. * @Description:
4. */
5. import router from '@ohos.router';
6. @Entry
7. @Component
8. struct ListBasics {
9.   @State labelName:string = router.getParams()['labelStr']
11.   build() {
12.     Row() {
13.       Column() {
14. //         返回按钮
15.        Row(){
16.          Button('<', {type:ButtonType.Circle}).fontSize(20).margin(10).fontWeight(900)
17.           Text(this.labelName).fontSize(30).textOverflow({overflow:TextOverflow.Ellipsis}).width(200).maxLines(1)
18.        }.width('100%')
19.         .height(50)
20.         .onClick(()=>{
21.           router.back()
22.         })
23.         Divider().color('#999').strokeWidth(3)
26.       }
27.       .width('100%')
28.       .height('100%')
29.     }
30.     .height('100%')
31.     .width('100%')
32.   }
33. }

复制代码

效果图

List容器组件的基础利用

设置List组件分列方向（listDirection）

纵向（Vertical）

listDirection的默认值就是 Axis.Vertical 因此无需进行额外设置

---

效果图

代码如下：

1. List(){
2.         ForEach(this.directionData, (item)=>{
3.                 ListItem(){
4.                         Column(){
5.                                 Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').padding(10)
6.                         }
7.                 }
8.         })
9. }.height(100)

复制代码

横向（Horizontal）

效果图

代码如下：
在list组件上添加 listDirection(Axis.Horizontal) 即可

1.    List(){
2.            ForEach(this.directionData, (item)=>{
3.               ListItem(){
4.                 Column(){
5.                     Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').padding(10)
6.                 }
7.               }
8.            })
9.         }.height(100).listDirection(Axis.Horizontal)

复制代码

设置ListItem分割线样式（divider）

效果图

代码如下：
在List 组件上添加 divider 来实现

1. List(){
2.         ForEach(this.directionData, (item)=>{
3.                 ListItem(){
4.                         Column(){
5.                                 Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').width('100%').height(50)
6.                         }
7.                 }
8.         })
9. }.height(200)
10.         .divider({
11.                 strokeWidth:3,
12.                 color:"#fff",
14.         })

复制代码

• strokeWidth: 分割线的线宽。
  
• color: 分割线的颜色。
  
• startMargin: 分割线与列表侧边起始端的间隔。
  
• endMargin: 分割线与列表侧边结束端的间隔。
  

简单案例

根据List的特性结合swipeAction 属性可以完成一个简单的列表滑出选择的案例
效果如图

数据

通过 private 来创建我们所需的数据

1. private ListData:object[]=[
2.         {
3.                 label:"丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由",
4.                 value:"rc1"
5.         },{
6.                 label:"明月几时有？把酒问青天。不知天上宫阙，今夕是何年。",
7.                 value:"rc2"
8.         },{
9.                 label:"我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。",
10.                 value:"rc3"
11.         },{
12.                 label:"转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？",
13.                 value:"rc4"
14.         },{
15.                 label:"人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。",
16.                 value:"rc5"
17.         }
18. ]

复制代码

基本样式

通过foreach 遍历数据 展示list 列表

1. List(){
2.         ForEach(this.ListData, (item)=>{
3.                 ListItem(){
4.                         Column({space:10}){
5.                                 Row(){
6.                                         Text(item.label).fontSize(25).lineHeight(30).maxLines(3).margin({top:10, bottom:10})
7.                                 }.borderStyle({bottom:BorderStyle.Solid}).borderWidth({left:0, top:0, bottom:3,right:0}).borderColor('#989').borderRadius(3)
8.                                         .width('100%')
9.                                         .padding({left:10, right:10})
10.                         }
11.                 }
14.                                         })
15. }

复制代码

@Builder定义一个组件

滑出的内容必要一个自定义的组件， 而在arkts 中 通过 @Builder 来创建组件， 关于组件的创建，以及传值等内容背面的章节中会有讲到， 本次的案例可以只做了解

1. // 自定义滑出组件
2.   @Builder DelItem(){
3.      Row(){
4.        Button('删除').type(ButtonType.Capsule).backgroundColor('#f00')
5.      }.padding(10)
6.   }

复制代码

利用自定义组件

在ListItem 中 可以通过 swipeAction 属性来设置ListItem的划出组件， 完整代码如下

1. /**
2. * @Author: 若城
3. * @Description: 实现List 左滑 删除或修改 案例
4. */
5. @Entry
6.         @Component
7.         struct ListCase {
8.                 private ListData:object[]=[
9.                         {
10.                                 label:"丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由",
11.                                 value:"rc1"
12.                         },{
13.                                 label:"明月几时有？把酒问青天。不知天上宫阙，今夕是何年。",
14.                                 value:"rc2"
15.                         },{
16.                                 label:"我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。",
17.                                 value:"rc3"
18.                         },{
19.                                 label:"转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？",
20.                                 value:"rc4"
21.                         },{
22.                                 label:"人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。",
23.                                 value:"rc5"
24.                         }
25.                 ]
26.                 // 自定义滑出组件
27.                 @Builder DelItem(){
28.                         Row(){
29.                                 Button('删除').type(ButtonType.Capsule).backgroundColor('#f00')
30.                         }.padding(10)
31.                 }
32.                 build() {
33.                         Row() {
34.                                 Column() {
35.                                         List(){
36.                                                 ForEach(this.ListData, (item)=>{
37.                                                         ListItem(){
38.                                                                 Column({space:10}){
39.                                                                         Row(){
40.                                                                                 Text(item.label).fontSize(25).lineHeight(30).maxLines(3).margin({top:10, bottom:10})
41.                                                                         }.borderStyle({bottom:BorderStyle.Solid}).borderWidth({left:0, top:0, bottom:3,right:0}).borderColor('#989').borderRadius(3)
42.                                                                                 .width('100%')
43.                                                                                 .padding({left:10, right:10})
44.                                                                 }
45.                                                         }
46.                                                         .swipeAction({end:this.DelItem})
49.                                                                                 })
50.                                         }
51.                                 }
52.                                 .width('100%')
53.                                         .height('100%')
54.                         }
55.                         .height('100%')
56.                                 .width('100%')
57.                 }
58.         }

复制代码

属性说明（swipeAction）

• ** start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。 **
  
• ** end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。 **
  

留意：
start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。
相关文章阅读推荐

01.HarmonyOS4.0 工具安装 — 动身篇
02. 快速上手！HarmonyOS4.0 Image组件详解
03. 快速上手！HarmonyOS4.0 Text/Span组件详解
04. 快速上手！HarmonyOS4.0 布局组件（Column/Row）
05. 快速上手！HarmonyOS4.0 Button_Blank 基础组件详解
06. 快速上手！HarmonyOS4.0 路由详解
07. 快速上手！HarmonyOS4.0 List_ListItem_ListItemGroup 组件详解（一）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。