HarmonyOS6 ArkTS List 子元素对齐
文章目录一、组件概述二、官方核心对齐 APIalignListItem(value: ListItemAlign)ListItemAlign 枚举值三、完整可运行代码四、代码功能说明1. 多列网格布局2. 统一子项对齐3. 动态切换对齐方式总结一、组件概述List是 HarmonyOS6 中支持多列网格布局的列表容器通过lanes属性可实现多列流布局并通过alignListItem属性统一控制所有列表子项ListItem的水平对齐方式是官方推荐的列表子项对齐方案。核心属性alignListItem作用统一设置 List 内所有 ListItem 的水平对齐方式适用布局多列列表lanes支持版本API 11 / HarmonyOS 6二、官方核心对齐 APIalignListItem(value: ListItemAlign)统一设置列表子项在交叉轴水平方向上的对齐方式。ListItemAlign 枚举值枚举值含义ListItemAlign.Start子项居左对齐默认ListItemAlign.Center子项水平居中ListItemAlign.End子项居右对齐三、完整可运行代码// xxx.ets import { ListDataSource } from ./ListDataSource; Entry Component struct ListLanesExample { arr: ListDataSource new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]); State alignListItem: ListItemAlign ListItemAlign.Start; build() { Column() { List({ space: 20, initialIndex: 0 }) { LazyForEach(this.arr, (item: string) { ListItem() { Text( item) .width(100%) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } .border({ width: 2, color: Color.Green }) }, (item: string) item) } .height(300) .width(90%) .friction(0.6) .border({ width: 3, color: Color.Red }) .lanes({ minLength: 40, maxLength: 40 }) .alignListItem(this.alignListItem) .scrollBar(BarState.Off) Button(点击更改alignListItem: this.alignListItem).onClick(() { if (this.alignListItem ListItemAlign.Start) { this.alignListItem ListItemAlign.Center; } else if (this.alignListItem ListItemAlign.Center) { this.alignListItem ListItemAlign.End; } else { this.alignListItem ListItemAlign.Start; } }) }.width(100%).height(100%).backgroundColor(0xDCDCDC).padding({ top: 5 }) } }运行效果如图四、代码功能说明1. 多列网格布局.lanes({ minLength: 40, maxLength: 40 })设置 List 为多列网格布局是alignListItem生效的基础。2. 统一子项对齐.alignListItem(this.alignListItem)通过alignListItem绑定状态变量一次性控制所有子项对齐方式。3. 动态切换对齐方式点击按钮可循环切换居左 → 居中 → 居右 → 居左总结alignListItem是 List 组件的属性用于统一控制所有子项。必须在多列布局lanes下效果明显。取值为ListItemAlign枚举不是 ItemAlign 也不是 Alignment。所有子项会同步生效无需单独设置。alignListItem是HarmonyOS6 官方提供的 List 多列子项对齐标准方案可高效实现子项居左、居中、居右适合相册、商品流、宫格等多列网格场景。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2449087.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!