09. 快速上手！HarmonyOS4.0 List/ListItem/ListItemGroup 组件详解（三）

全栈若城

发布于 2024-05-26 09:31:22

690

发布于 2024-05-26 09:31:22

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

本章内容概要

ListItemGroup介绍

该组件用来展示列表item分组，宽度默认充满List组件，必须配合List组件来使用。

ListItemGroup使用说明

当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时，不允许设置ListItemGroup组件的height属性。
ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。
当父组件List的listDirection属性为Axis.Horizontal时，不允许设置ListItemGroup组件的width属性。
ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。
当前ListItemGroup内部的ListItem组件不支持编辑、框选、拖拽功能，即ListItem组件的editable、selectable属性不生效。

ListItemGroup 案例展示

创建一个简单的数据源

private DataGroup:object[] = [
	{
		header:'静夜思',
		content:['窗前明月光', '疑是地上霜', '举头望明月', '低头思故乡'],
		footer:'唐 - 李白'
	},
	{
		header:'鹿柴',
		content:['空山不见人', '但问人语响', '返景入深林', '复照青苔上'],
		footer:'唐 - 王维'
	}
]

编写ListItemGroup 使用的基础架构

@Entry
	@Component
	struct ListItemGroupNote {
		private DataGroup: object[] = [
			{
				header: '静夜思',
				content: ['窗前明月光', '疑是地上霜', '举头望明月', '低头思故乡'],
				footer: '唐 - 李白'
			},
			{
				header: '鹿柴',
				content: ['空山不见人', '但问人语响', '返景入深林', '复照青苔上'],
				footer: '唐 - 王维'
			}
		]

		@Builder headerItem(title: string) {

		}

		@Builder footerItem(title: string) {

		}

		build() {
			Row() {
				Column() {
					List() {
						ForEach(this.DataGroup, (item) => {
							ListItemGroup({
								header:this.headerItem(item.header),
								footer:this.footerItem(item.footer)
							}) {
								ForEach(item.content, (itemA)=>{
									ListItem(){
										Text(itemA)
											.width('100%').height(40).fontSize(25)
									}

								})
							}
						})

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

案例完善

**接下来我们只需要将自定义组件内的样式完善即可，如下 **

@Builder headerItem(title: string) {
	Text(title).fontSize(25).height(50).width('100%').backgroundColor('#e5e5e5')
}

@Builder footerItem(title: string) {
	Text(title).fontSize(25).height(50).width('100%').backgroundColor('#e5e5e5')
}

我们在List 组件和ListItemGroup 中添加 space 属性使其样式更加完美一些 , 效果如下

添加divider

divider({
	strokeWidth:3, 
	color:'#e4e4e4',
	startMargin:10,
	endMargin:10
})

strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin：分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。
strokeWidth, startMargin和endMargin不支持设置百分比。

效果如图

完整代码

@Entry
@Component
struct ListItemGroupNote {
  private DataGroup: object[] = [
    {
      header: '静夜思',
      content: ['窗前明月光', '疑是地上霜', '举头望明月', '低头思故乡'],
      footer: '唐 - 李白'
    },
    {
      header: '鹿柴',
      content: ['空山不见人', '但问人语响', '返景入深林', '复照青苔上'],
      footer: '唐 - 王维'
    }
  ]

  @Builder headerItem(title: string) {
    Text(title).fontSize(25).height(50).width('100%').backgroundColor('#e5e5e5')
  }

  @Builder footerItem(title: string) {
    Text(title).fontSize(25).height(50).width('100%').backgroundColor('#e5e5e5')
  }

  build() {
    Row() {
      Column() {
        List({space:20}) {
          ForEach(this.DataGroup, (item) => {
            ListItemGroup({
                header:this.headerItem(item.header),
                footer:this.footerItem(item.footer),
                space:10
              }) {
                ForEach(item.content, (itemA)=>{
                  ListItem(){
                    Text(itemA)
                      .width('100%').height(40).fontSize(25)
                  }

                })
            }.divider({
              strokeWidth:3,
              color:'#e4e4e4',
              startMargin:10,
              endMargin:10
            })
          })

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

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

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

footer