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

全栈若城

发布于 2024-05-11 08:21:07

810

发布于 2024-05-11 08:21:07

文章被收录于专栏：若城技术专栏若城技术专栏

本章内容概要

返回按钮

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

/**
 * @Author: 若城
 * @Description:
 */
import router from '@ohos.router';
@Entry
@Component
struct ListBasics {
  @State labelName:string = router.getParams()['labelStr']

  build() {
    Row() {
      Column() {
//         返回按钮
       Row(){
         Button('<', {type:ButtonType.Circle}).fontSize(20).margin(10).fontWeight(900)
          Text(this.labelName).fontSize(30).textOverflow({overflow:TextOverflow.Ellipsis}).width(200).maxLines(1)
       }.width('100%')
        .height(50)
        .onClick(()=>{
          router.back()
        })
        Divider().color('#999').strokeWidth(3)


      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .width('100%')
  }
}

效果图

List容器组件的基础使用

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

纵向（Vertical）

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

效果图

代码如下：

List(){
	ForEach(this.directionData, (item)=>{
		ListItem(){
			Column(){
				Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').padding(10)
			}
		}
	})
}.height(100)

横向（Horizontal）

效果图

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

   List(){
           ForEach(this.directionData, (item)=>{
              ListItem(){
                Column(){
                    Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').padding(10)
                }
              }
           })
        }.height(100).listDirection(Axis.Horizontal)

设置ListItem分割线样式（divider）

效果图

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

List(){
	ForEach(this.directionData, (item)=>{
		ListItem(){
			Column(){
				Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').width('100%').height(50)
			}
		}
	})
}.height(200)
	.divider({
		strokeWidth:3,
		color:"#fff",

	})

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

简单案例

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

效果如图

数据

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

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

基本样式

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

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


					})
}

@Builder定义一个组件

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

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

使用自定义组件

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

/**
 * @Author: 若城
 * @Description: 实现List 左滑 删除或修改 案例
 */
@Entry
	@Component
	struct ListCase {
		private ListData:object[]=[
			{
				label:"丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由",
				value:"rc1"
			},{
				label:"明月几时有？把酒问青天。不知天上宫阙，今夕是何年。",
				value:"rc2"
			},{
				label:"我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。",
				value:"rc3"
			},{
				label:"转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？",
				value:"rc4"
			},{
				label:"人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。",
				value:"rc5"
			}
		]
		// 自定义滑出组件
		@Builder DelItem(){
			Row(){
				Button('删除').type(ButtonType.Capsule).backgroundColor('#f00')
			}.padding(10)
		}
		build() {
			Row() {
				Column() {
					List(){
						ForEach(this.ListData, (item)=>{
							ListItem(){
								Column({space:10}){
									Row(){
										Text(item.label).fontSize(25).lineHeight(30).maxLines(3).margin({top:10, bottom:10})
									}.borderStyle({bottom:BorderStyle.Solid}).borderWidth({left:0, top:0, bottom:3,right:0}).borderColor('#989').borderRadius(3)
										.width('100%')
										.padding({left:10, right:10})
								}
							}
							.swipeAction({end:this.DelItem})


										})
					}
				}
				.width('100%')
					.height('100%')
			}
			.height('100%')
				.width('100%')
		}
	}

属性说明（swipeAction）

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

注意： start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-05-09，如有侵权请联系 cloudcommunity@tencent.com 删除

布局