HarmonyOS 鸿蒙Next ArkUI布局中，容器组件中子组件怎么样才能动态均分

HarmonyOS 鸿蒙Next ArkUI布局中，容器组件中子组件怎么样才能动态均分 各位老师，最近在学习张容超老师的2048游戏 ArkUI 实现，发现ArkUI Row组件子容器不能实现均匀布局，会超出屏幕外，代码和预览结果如下：

@Extend(Text) function fancy() {  
  .width('100%')  
  .fontColor(Color.White)  
  .fontSize(30)  
  .textAlign(TextAlign.Center)  
  .margin({ top: 10 })
}
@Extend(Column) function ColumnFancy() {  
  .layoutWeight(1)  
  .height(120)  
  .backgroundColor('#bbadb0')  
  .borderRadius(10)  
  .alignItems(HorizontalAlign.Center)
}
@Preview
@Componentstruct InformationBar {  
  build() {    
    Row({space: 10}) {      
      Column() {        
        Text('2048')        
        .fancy()        
        Text('4x4')        
        .fancy()      
      }      
      .ColumnFancy()      
      Column() {        
        Text('当前分')          
        .fancy()        
        Text('4x4')          
        .fancy()      
      }      
      .ColumnFancy()      
      Column() {        
        Text('最高分')          
        .fancy()        
        Text('4x4')          
        .fancy()      
      }      
      .ColumnFancy()    
    }    
    .width('100%')    
    .margin(10)
  }
}


更多关于HarmonyOS 鸿蒙Next ArkUI布局中，容器组件中子组件怎么样才能动态均分的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

你可以改为使用Flex来布局，我是这样写的

Flex({
  direction: FlexDirection.Row,
  justifyContent: FlexAlign.SpaceEvenly
}) {
  Flex({
    direction: FlexDirection.Column,
    justifyContent: FlexAlign.Center
  }) {
    Text('2048')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(22)
      .textAlign(TextAlign.Center)
    Text('4X4')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(20)
      .textAlign(TextAlign.Center)
  }
  .width(100)
  .height('100%')
  .backgroundColor('#BBADA0')
  .borderRadius(10)
  Flex({
    direction: FlexDirection.Column,
    justifyContent: FlexAlign.Center
  }) {
    Text('当前分')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(22)
      .textAlign(TextAlign.Center)
    Text(this.currentScore.toString())
      .width('100%')
      .fontColor(Color.White)
      .fontSize(20)
      .textAlign(TextAlign.Center)
  }
  .width(100)
  .height('100%')
  .backgroundColor('#BBADA0')
  .borderRadius(10)
  Flex({
    direction: FlexDirection.Column,
    justifyContent: FlexAlign.Center
  }) {
    Text('最高分')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(22)
      .textAlign(TextAlign.Center)
    Text(this.highestScore.toString())
      .width('100%')
      .fontColor(Color.White)
      .fontSize(20)
      .textAlign(TextAlign.Center)
  }
  .width(100)
  .height('100%')
  .backgroundColor('#BBADA0')
  .borderRadius(10)
}
.width('100%').height(60).margin({ top: 10 })

更多关于HarmonyOS 鸿蒙Next ArkUI布局中，容器组件中子组件怎么样才能动态均分的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


非常感谢，您的方案能解决我遇到问题，不知道ArkUI有没有提供获取组件的属性的方法，如果有读取方法UI布局应该会更加灵活方便！希望有老师能反馈到开发组优化。

目前还没有此类方法。

如果是你要想用space或者margin等这些属性，又要相对宽度或者长度，建议在内部在包裹一个组件。否则即便你用了Flex组件，Flex的内部也会被压缩，你仔细看看内部的小方块是不是被压缩成了长方形？

简而言之就是这样写，我个人的习惯就是这种布局组件就是用来切割页面布局的，最好使用layoutWeight或者百分比这种切割页面，而不应该设定具体长宽数值的属性（因为屏幕长宽具体px对开发者来说是个黑盒）。要设定具体的数值可以在内部包裹一个组件

《ArkUI实战》电子书，应该可以帮助到你：https://www.arkui.club

使用Flex来布局优化方案

@Extend(Text) function fancy() {  
  .width('100%')  
  .fontColor(Color.White)  
  .fontSize(22)  
  .textAlign(TextAlign.Center)  
  .margin({ top: 10 })
}
@Extend(Column) function ColumnFancy() {  
  .width('30%')  
  .aspectRatio(1)  
  .backgroundColor('#bbadb0')  
  .borderRadius(10)  
  .alignItems(HorizontalAlign.Center)
}
@Preview
@Componentstruct InformationBar {
  @State currentScore: number = 2  
  @State highestScore: number = 4  
  build() {    
    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly}) {      
      Column() {        
        Text('2048')          
        .fancy()        
        Text('4x4')          
        .fancy()      
      }      
      .ColumnFancy()      
      Column() {        
        Text('当前分')          
        .fancy()        
        Text(`${this.currentScore}`)          
        .fancy()      
      }      
      .ColumnFancy()      
      Column() {        
        Text('最高分')          
        .fancy()        
        Text(`${this.highestScore}`)          
        .fancy()      
      }      
      .ColumnFancy()    
    }    
    .width('100%')  
  }
}

Column() {
  Text('最高分')
    .fancy()
  Text('4x4')
    .fancy()
}
.width("33.3%")

您非常感谢您的解答，用了您的方法还是切边，跟我的效果是一样的，又参考了一下文档，layoutWeight属性已经动态计算了百分比，只是ArkUI框架没有把space宽度送减去，所以才切边的，不知道以后的sdk会不会优化？

父组件宽度固定或者100%，子组件宽度用百分比。比如一行有5个，那么就是width(“20%”)

欢迎开发小伙伴们进来帮帮楼主

在HarmonyOS鸿蒙系统的Next ArkUI布局中，若要实现容器组件中子组件的动态均分，你可以使用GridContainer组件。GridContainer允许你将子组件按网格布局排列，并可以动态调整每个子组件的大小，使其均匀分布。

具体来说，你可以通过以下步骤实现动态均分：

  1. 定义GridContainer：在布局文件中定义一个GridContainer作为容器组件。

  2. 设置列数：通过columnCount属性设置网格的列数。当子组件数量变化时，这些子组件会自动在指定的列数内均分。

  3. 添加子组件：向GridContainer中添加子组件。这些子组件将根据columnCount的值自动调整其宽度和高度，以实现动态均分。

  4. 动态更新：如果需要动态更新子组件的数量或布局，可以通过代码操作GridContainer，如添加或移除子组件，并重新设置columnCount（如果需要）。

例如，如果你希望子组件在两列中动态均分，可以将columnCount设置为2。当添加或移除子组件时，这些子组件会自动在两列中重新排列。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部