HarmonyOS 栅格布局如何让其居中?

HarmonyOS
2024-12-26 14:55:49
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以通过columns属性来设置GridRow的列数,让子元素占满父组件,然后设置父组件主轴和交叉轴居中即可。

参考demo:

// xxx.ets
@Entry
@Component
struct GridContainerExample1 {
  build() {
    Column() {
      GridRow({ columns : 4 }) {
        GridCol({ order: 4 }) {
          Row() {
            Text('1')
          }.width('100%').height('50vp')
        }.backgroundColor(Color.Red)
        GridCol({ order: 3 }) {
          Row() {
            Text('2')
          }.width('100%').height('50vp')
        }.backgroundColor(Color.Orange)
        GridCol({ order: 2 }) {
          Row() {
            Text('3')
          }.width('100%').height('50vp')
        }.backgroundColor(Color.Yellow)
        GridCol({ order: 1 }) {
          Row() {
            Text('4')
          }.width('100%').height('50vp')
        }.backgroundColor(Color.Green)
      }
      .width(120)
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height("100%")
  }
} 

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-grid-layout-V5#布局的总列数

分享
微博
QQ
微信
回复
2024-12-26 18:30:32
相关问题
栅格布局怎么实现滚动效果?
1045浏览 • 0回复 待解决
HarmonyOS 如何背景图居中
417浏览 • 1回复 待解决
RelativeContainer如何多个view居中
1672浏览 • 1回复 待解决
有谁知道如何理解栅格布局
921浏览 • 1回复 待解决
HarmonyOS UI布局水平居中问题
449浏览 • 1回复 待解决