HarmonyOS中的Grid布局使用方法

Grid布局

• 想要控制屏幕的分栏 分几列， 怎么分 特别像前端的栅格布局
• Row组件默认情况下，里面的元素的纵向是居中的
• Column组件默认横向是居中的

 注意:Grid组件下只能放置GridItem组件

Grid可以设置columnsTemplate和rowsTemplate

columnsTemplate是设置横向的分配，如果设置 1fr 1fr 表示，等分为两份， 如果设置1fr 2fr表示左边一份，右边两份， 在设置columnsTemplate不设置rowsTemplate的情况下，如果内容超出容器区域，会自动出现滚动条 columnsGap设置列和列之间的间距，rowsGap设置行和行之间的间距

borderRadius 这个是设置圆角的一个属性，一般再容器布局里面的，这里插一个主要是写到这里的时候看到了

这个不知道什么意思于是查了一下然后就记录到这里了

.columnsTemplate('1fr 1fr')这个是控制每个组件之间的一个间距的，里面的fr代表份数几个fr就代表几分

然后fr前面的数字代表一份占几个位置

.columnsGap(10)是一个Grid中的一个属性，是控制布局的每个组件之间的间距的，这个是每个列之间的

.rowsGap(10) 与上面一样，这个是每个列之间的一个间距

.padding(10) 这个是控制上下左右四个方向的一个间距，是这整个组件的一个间距上面的是单个组件之间的

这个组件的使用方法

首先我们可以先定义好我们的一个Grid

下面是一个关于这个组件做的一个小案例

效果图片

上面的案例的对应的代码

@Entry
@Component
struct GridCase {

  build() {
    Grid(){
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
      GridItemCase()
    }
    .width('100%')
    .height('100%')
    .columnsTemplate('1fr 1fr')
    .columnsGap(10)//是一个Grid中的一个属性，是控制布局的每个组件之间的间距的，这个是每个列之间的
    .rowsGap(10)//与上面一样，这个是每个列之间的一个间距
    .padding(10)
  }
}

//再这里定义子组件，一个自定义组件结构
@Component
struct GridItemCase {
  build() {
    //Grid布局里面的子组件必须是GridItem组件，不然的话显示不出来效果
    GridItem(){
      Row(){
        //因为Column和Row这两个组件默认都是居中的，所以我为了居中
        Column(){
          Text('内容')//这里放一个文本框
        }
        .width('100%')
      }
      .height(200)
      //设置子组件的边框圆角
      .borderRadius(4)
      //设置子组件的背景颜色
      .backgroundColor(Color.Pink)
    }

  }
}