diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 3f3934d659540f4a8c0db352df48a455edf51300..05fb42f436a97daddfd68cbf7c8923c60a1a6de9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -104,6 +104,7 @@ - [GridItem](ts-container-griditem.md) - [List](ts-container-list.md) - [ListItem](ts-container-listitem.md) + - [ListItemGroup](ts-container-listitemgroup.md) - [Navigator](ts-container-navigator.md) - [Panel](ts-container-panel.md) - [Refresh](ts-container-refresh.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_listitemgroup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_listitemgroup.gif new file mode 100644 index 0000000000000000000000000000000000000000..439ebb51f0e1918988aac5cb7eddba80df2b4f4d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_listitemgroup.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index 8e56157a7504fe5f600fcaa049e0b0685e42c44b..f840fc4960ac78b13cb21441fd1c847e1c687740 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -16,7 +16,7 @@ ## 子组件 -包含[ListItem](ts-container-listitem.md)子组件。 +包含[ListItem](ts-container-listitem.md)、[ListItemGroup](ts-container-listitemgroup.md)子组件。 ## 接口 @@ -44,8 +44,9 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} | restoreId8+ | number | - | 组件迁移标识符，标识后的组件在应用迁移时，组件状态会被迁移到被拉起方的同标识组件。
列表组件状态，包括起始位置显示的item序号。 | | lanes9+ | number \|
{
minLength: Length,
maxLength: Length
} | 1 | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局，规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴宽度来决定每列的宽度；
- lane设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下，设置了{minLength: 40vp，maxLength: 60vp}，则当List组件宽度为70vp时，ListItem为一列，并且根据alignListItem属性做靠左、居中或者靠右布局；当List组件宽度变化至80vp时，符合两倍的minLength，则ListItem自适应为两列。 | | alignListItem9+ | ListItemAlign | ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为居中。 | +| sticky9+ | StickyStyle | StickyStyle.None | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底，参见StickyStyle的枚举说明。| -- ListItemAlign枚举说明 +- ListItemAlign9+枚举说明 | 名称 | 描述 | | ------ | -------------------------------------- | @@ -53,6 +54,15 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller} | Center | ListItem在List中，交叉轴方向居中对齐。 | | End | ListItem在List中，交叉轴方向尾部对齐。 | +- StickyStyle9+枚举说明 + + | 名称 | 描述 | + | ------ | -------------------------------------- | + | None | ListItemGroup的header不吸顶，footer不吸底。 | + | Header | ListItemGroup的header吸顶。 | + | Footer | ListItemGroup的footer吸底。 | + + sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。 ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md new file mode 100644 index 0000000000000000000000000000000000000000..206f577e2ddb3e6d40ae68b3976e3b42f1b475bf --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -0,0 +1,110 @@ +# ListItemGroup + +该组件用来展示列表item分组，宽度默认充满[List](ts-container-list.md)组件，必须配合List组件来使用。 + +> **说明：** +> +> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + + +## 子组件 + +包含[ListItem](ts-container-listitem.md)子组件。 + + +## 接口 + +ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string}}) + +**参数：** + + | 参数名 | 参数类型 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | + | header | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup头部组件。 | + | footer | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup尾部组件。 | + | space | number \| string | 否 | 列表项间距。 | + +## 属性 + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| divider | {
strokeWidth: [Length](../../ui/ts-types.md#length),
color?: [ResourceColor](../../ui/ts-types.md#resourcecolor8),
startMargin?: [Length](../../ui/ts-types.md#length),
endMargin?: [Length](../../ui/ts-types.md#length)
} \| null | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 | + + +## 示例 + +```ts +// xxx.ets +function itemHeadBuilder(text: string) { + @Builder function itemHead() { + Text(text) + .fontSize(20) + .backgroundColor(0xAABBCC) + .width("100%") + .padding(10) + } + return itemHead +} + +function itemFootBuilder(num: number) { + @Builder function itemFoot() { + Text('共' + num + "节课") + .fontSize(16) + .backgroundColor(0xAABBCC) + .width("100%") + .padding(5) + } + return itemFoot +} + +@Entry +@Component +struct ListItemGroupExample { + private timetable: any = [ + { + title:'星期一', + projects:['语文', '数学', '英语'] + }, + { + title:'星期二', + projects:['物理', '化学', '生物'] + }, + { + title:'星期三', + projects:['历史', '地理', '政治'] + }, + { + title:'星期四', + projects:['美术', '音乐', '体育'] + } + ] + + build() { + Column() { + List({ space: 20 }) { + ForEach(this.timetable, (item) => { + ListItemGroup({ header:itemHeadBuilder(item.title), footer:itemFootBuilder(item.projects.length) }) { + ForEach(item.projects, (project) => { + ListItem() { + Text(project) + .width("100%").height(100).fontSize(20) + .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF) + } + }, item => item) + } + .borderRadius(20) + .divider({ strokeWidth: 1, color: 0xDCDCDC }) // 每行之间的分界线 + }) + } + .width('90%') + .sticky(StickyStyle.Header|StickyStyle.Footer) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![zh-cn_image_0000001219864159](figures/zh-cn_image_listitemgroup.gif)