HarmonyOS6 ArkTS ListItemGroup设置多列布局

文章目录一、核心概念1. 多列布局原理2. 关键属性二、多列布局核心配置1. List配置列数2. 子项对齐配置3. ListItemGroup适配三、完整实现示例五、多列布局效果与规则1. 界面展示效果2. 布局规则总结一、核心概念1. 多列布局原理配置入口多列布局不由ListItemGroup控制而是由其父容器List通过lanes属性统一配置作用范围lanes配置后List内所有ListItemGroup的子项都会自动按指定列数排列布局规则系统自动计算子项宽度平均分配列空间自动换行展示。2. 关键属性lanesList的核心属性设置纵向滚动时的列数取值为正整数默认1单列alignListItemList属性设置子项在交叉轴列方向的对齐方式支持Start/Center/EndListItemGroup仅作为分组容器承载子项与Header/Footer不参与列数计算。二、多列布局核心配置1. List配置列数通过lanes属性设置列数是实现多列布局的唯一入口List(){// ListItemGroup 子项}.lanes(3)// 设置3列布局2. 子项对齐配置通过alignListItem优化多列子项的对齐效果List().lanes(3).alignListItem(ListItemAlign.Center)// 子项在列内居中对齐3. ListItemGroup适配ListItemGroup无需额外配置Header/Footer会自动铺满整行子项自动按列排列头部Header独占一行宽度100%子项ListItem自动分配列宽多列排列尾部Footer独占一行宽度100%三、完整实现示例// xxx.etsimport{ComponentContent}fromkit.ArkUI;import{TimeTable,ProjectsDataSource,TimeTableDataSource}from./ListDataSource;// 头部参数类classHeadBuilderParams{text:string|Resource;constructor(text:string|Resource){this.texttext;}}// 尾部参数类classFootBuilderParams{num:number|Resource;constructor(num:number|Resource){this.numnum;}}// 头部构建器BuilderfunctionitemHead(params:HeadBuilderParams){Text(params.text).fontSize(20).height(48vp).width(100%).padding(10).backgroundColor($r(sys.color.background_tertiary))}// 尾部构建器BuilderfunctionitemFoot(params:FootBuilderParams){Text(共params.num.toString()节课).fontSize(20).height(48vp).width(100%).padding(10).backgroundColor($r(sys.color.background_tertiary))}// 自定义分组组件Componentstruct MyItemGroup{item:TimeTable{title:,projects:[]};header?:ComponentContentHeadBuilderParamsundefined;footer?:ComponentContentFootBuilderParamsundefined;headerParamnewHeadBuilderParams(this.item.title);footerParamnewFootBuilderParams(this.item.projects.length);itemArr:ProjectsDataSourcenewProjectsDataSource([]);aboutToAppear():void{this.headernewComponentContent(this.getUIContext(),wrapBuilder(itemHead),this.headerParam);this.footernewComponentContent(this.getUIContext(),wrapBuilder(itemFoot),this.footerParam);this.itemArrnewProjectsDataSource(this.item.projects);}GetHeader(){this.header?.update(newHeadBuilderParams(this.item.title));returnthis.header;}GetFooter(){this.footer?.update(newFootBuilderParams(this.item.projects.length));returnthis.footer;}build(){// ListItemGroup 无需配置列数自动适配父级List的lanesListItemGroup({headerComponent:this.GetHeader(),footerComponent:this.GetFooter()}){LazyForEach(this.itemArr,(project:string){ListItem(){Column(){Text(project).fontSize(20).textAlign(TextAlign.Center)}.width(100%).height(80).padding(8).justifyContent(FlexAlign.Center).backgroundColor($r(sys.color.background_secondary)).borderRadius(12).shadow({radius:4,color:#20000000,offsetX:0,offsetY:2})}},(item:string)item)}// 分组内分割线配置.divider({strokeWidth:2,color:$r(sys.color.background_tertiary),startMargin:20,endMargin:20})}}// 主页面EntryComponentstruct ListItemGroupExample{itemGroupArray:TimeTableDataSourcenewTimeTableDataSource([]);aboutToAppear():void{lettimeTable:TimeTable[][{title:星期一,projects:[语文,数学,英语,物理,化学,生物]},{title:星期二,projects:[历史,地理,政治,体育,美术,音乐]},{title:星期三,projects:[计算机,编程,算法,数据结构,网络]},{title:星期四,projects:[文学,写作,阅读,书法]},{title:星期五,projects:[实验,生活,奥数,高数,中医]}];this.itemGroupArraynewTimeTableDataSource(timeTable);}build(){Column(){// 核心List配置 lanes3 实现3列布局List({space:15}){LazyForEach(this.itemGroupArray,(item:TimeTable){MyItemGroup({item:item})},(item:TimeTable)item.title)}.lanes(3)// 多列布局核心配置.alignListItem(ListItemAlign.Center)// 子项居中对齐.layoutWeight(1).scrollBar(BarState.Auto).width(100%).margin(10)}.backgroundColor($r(sys.color.background_primary)).width(100%).height(100%).padding(10)}}运行效果如图五、多列布局效果与规则1. 界面展示效果Header/Footer自动铺满整行不参与多列排列保持分组标题和统计信息完整展示子项布局分组内所有ListItem自动分为3列平均宽度自适应排列分组隔离不同ListItemGroup之间相互独立各自按列展示子项互不干扰样式适配子项支持圆角、阴影、背景色等卡片样式多列展示更美观。2. 布局规则列数由List.lanes统一控制所有分组共享列数配置子项宽度 List可用宽度 / 列数自动计算子项超出列数自动换行纵向滚动Header/Footer永远独占一行宽度100%。总结List配置列数在List上通过.lanes(数字)设置多列布局优化子项对齐使用.alignListItem(ListItemAlign.Center)让子项居中展示编写分组组件使用ListItemGroup包裹子项配置Header/Footer子项样式适配设置ListItem为自适应宽度、卡片样式适配多列数据渲染通过LazyForEach加载分组数据完成多列分组布局。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力