HarmonyOS6 ArkTS Grid 以当前行最高的GridItem的高度为其他GridItem的高度

文章目录HarmonyOS6 ArkTS Grid 以当前行最高的GridItem的高度为其他GridItem的高度核心原理完整代码核心讲解1. 开启行高统一2. GridItem 必须不设置固定高度3. 内部自适应填充flexGrow:1总结HarmonyOS6 ArkTS Grid 以当前行最高的GridItem的高度为其他GridItem的高度核心原理要实现Grid 行内高度统一必须满足以下规则Grid 设置 alignItems 为 GridItemAlignment.STRETCH这是开启“拉伸对齐”的核心配置。GridItem 不设置固定高度高度必须自适应才能被拉伸到行最高高度。Grid 必须设置固定列数 columnsTemplate自适应列模式不支持该特性。完整代码// GridDataSource.etsexportclassGridDataSourceimplementsIDataSource{privatelist:string[][];privatelisteners:DataChangeListener[][];constructor(list:string[]){this.listlist;}totalCount():number{returnthis.list.length;}getData(index:number):string{returnthis.list[index];}registerDataChangeListener(listener:DataChangeListener):void{if(this.listeners.indexOf(listener)0){this.listeners.push(listener);}}unregisterDataChangeListener(listener:DataChangeListener):void{constposthis.listeners.indexOf(listener);if(pos0){this.listeners.splice(pos,1);}}// 通知控制器数据位置变化notifyDataMove(from:number,to:number):void{this.listeners.forEach(listener{listener.onDataMove(from,to);})}// 交换元素位置publicswapItem(from:number,to:number):void{lettemp:stringthis.list[from];this.list[from]this.list[to];this.list[to]temp;this.notifyDataMove(from,to);}}EntryComponentstruct Index{data:GridDataSourcenewGridDataSource([]);Stateitems:number[][];aboutToAppear():void{letlist:string[][];for(leti0;i100;i){list.push(i.toString());this.items.push(this.getSize());}this.datanewGridDataSource(list);}getSize(){letretMath.floor(Math.random()*5);returnMath.max(1,ret);}build(){Column({space:10}){Text(Grid alignItems示例代码)Grid(){LazyForEach(this.data,(item:number){// GridItem和Column不设置高度默认会自适应子组件大小设置STRETCH的场景下会变成与当前行最高节点同高。// 若设置高度则会保持已设置的高度不会与当前行最高节点同高。GridItem(){Column(){Column().height(100).backgroundColor(#D5D5D5).width(100%)// 中间的Text设置flexGrow(1)来自适应填满父组件的空缺Text(这是一段文字。.repeat(this.items[item])).flexGrow(1).width(100%).align(Alignment.TopStart).backgroundColor(#F7F7F7)Column().height(50).backgroundColor(#707070).width(100%)}}.border({color:Color.Black,width:1})})}.columnsGap(10).rowsGap(5).columnsTemplate(1fr 1fr).width(80%).height(100%)// Grid设置alignItems为STRETCH以当前行最高的GridItem的高度为其他GridItem的高度。.alignItems(GridItemAlignment.STRETCH).scrollBar(BarState.Off)}.height(100%).width(100%)}}运行效果如图核心讲解1. 开启行高统一.alignItems(GridItemAlignment.STRETCH)作用Grid 会自动计算每一行中最高的 GridItem同一行其他所有 GridItem 高度自动拉伸到该高度每行独立计算互不影响2. GridItem 必须不设置固定高度代码中明确注释// GridItem和Column不设置高度默认会自适应子组件大小 // 设置STRETCH的场景下会变成与当前行最高节点同高 // 若设置高度则会保持已设置的高度不会与当前行最高节点同高规则如果 GridItem 设置了固定 height → 不会拉伸如果 GridItem 高度自适应 → 会被拉伸为行最高高度3. 内部自适应填充flexGrow:1Text(...).flexGrow(1)作用当父容器被拉伸时Text 自动填满剩余空间保证内容布局不会出现空白错位总结GridItemAlignment.STRETCH必须设置GridItem 不能设置固定高度必须设置columnsTemplate固定列数每行独立计算最高高度并统一整行高度内部可使用 flexGrow 填充剩余空间如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力