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

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

核心原理

要实现Grid 行内高度统一，必须满足以下规则：

1. Grid 设置 alignItems 为 GridItemAlignment.STRETCH
   这是开启“拉伸对齐”的核心配置。
2. GridItem 不设置固定高度
   高度必须自适应，才能被拉伸到行最高高度。
3. Grid 必须设置固定列数 columnsTemplate
   自适应列模式不支持该特性。

完整代码

// GridDataSource.etsexportclassGridDataSourceimplementsIDataSource{privatelist:string[]=[];privatelisteners:DataChangeListener[]=[];constructor(list:string[]){this.list=list;}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{constpos=this.listeners.indexOf(listener);if(pos>=0){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:string=this.list[from];this.list[from]=this.list[to];this.list[to]=temp;this.notifyDataMove(from,to);}}@Entry@Componentstruct Index{data:GridDataSource=newGridDataSource([]);@Stateitems:number[]=[];aboutToAppear():void{letlist:string[]=[];for(leti=0;i<100;i++){list.push(i.toString());this.items.push(this.getSize());}this.data=newGridDataSource(list);}getSize(){letret=Math.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:1）

Text('...').flexGrow(1)

作用：

• 当父容器被拉伸时，Text 自动填满剩余空间
• 保证内容布局不会出现空白错位

总结

1. GridItemAlignment.STRETCH必须设置
2. GridItem 不能设置固定高度
3. 必须设置columnsTemplate固定列数
4. 每行独立计算最高高度并统一整行高度
5. 内部可使用 flexGrow 填充剩余空间

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力！