鸿蒙栅格布局

76 阅读1分钟

GridRow

栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题,保证不同设备上各个模块的布局一致性。

栅格容器组件,仅可以和栅格子组件GridCol在栅格布局场景中使用。

通过栅格布局的特性来实现,响应式布局

GridRow({ gutter: 10, columns: { sm: 4, md: 8, lg: 12 } }) {
  ForEach(Array.from({ length: 12 }), () => {
    GridCol()
      .width('100%')
      .height('100%')
      .backgroundColor('#baffa2b4')
  })
}
.zIndex(2)
.height('100%')

gutter代码间隔为10,colums代表不同的尺寸拥有的不同列数。当为sm尺寸时为4列,当为md尺寸时为8列,当为lg尺寸时为12列

image.png

image.png

image.png