HarmonyOS应用开发学习笔记 UI布局学习 栅格布局（GridRow/GridCol）

HarmonyOS应用开发学习笔记 UI布局学习 相对布局 （RelativeContainer）

官方文档：栅格布局（GridRow/GridCol）

一、代码示例

Row() {
  GridRow({ columns: 4 }) {
    ForEach(this.bgColors, (item, index) => {
      GridCol() {
        Row() {
          Text(`${index + 1}`)
        }.width('100%').height('50')
      }.backgroundColor(item)
    })
  }
  .width('100%').height('100%')
  .onBreakpointChange((breakpoint) => {
    this.currentBp = breakpoint
  })
}
.height(160)
.border({ color: Color.Blue, width: 2 })
.width