当前位置:   article > 正文

鸿蒙开发-UI-布局-栅格布局_鸿蒙vp

鸿蒙vp

鸿蒙开发-UI-布局

鸿蒙开发-UI-布局-线性布局

鸿蒙开发-UI-布局-层叠布局

鸿蒙开发-UI-布局-弹性布局

鸿蒙开发-UI-布局-相对布局


前言

上文详细学习常见布局方式-相对布局,学习相对布局中锚点以及对齐方式的知识,本文将学习格栅布局的相关知识。

一、基本概念

1.为布局提供规律性结构,解决多尺寸多设备动态布局问题,通过将页面划分为等宽的列数和行数,方便对页面元素定位排版

2.为系统提供统一定位标注,保证不同设备上各个模块布局一致性

3.提供灵活的间距调整方法,通过调整列与列之间,行与行之间间距来控制页面排版

4.提供一对多布局的自动换行和自适应

二、格栅容器组件

1.栅格系统断点

格栅系统以设备的水平宽度(单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则,开发者可根据需求在不同的断点区间实现不同的页面布局效果

vp: 一种屏幕密度相关像素单位,鸿蒙开发采用vp为基准数据单位,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。在实际宽度为1440物理像素的屏幕上,1vp约等于3px

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下

断点名称

取值范围(vp)

设备描述

xs

[0, 320)

最小宽度类型设备。

sm

[320, 520)

小宽度类型设备。

md

[520, 840)

中等宽度类型设备。

lg

[840, +∞)

大宽度类型设备。

在GridRow栅格组件中,允许开发者使用breakpoints自定义修改断点的取值范围,最多支持6个断点,除了默认的四个断点外,还可以启用xl,xxl两个断点,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备的布局设置。

断点名称

设备描述

xs

最小宽度类型设备。

sm

小宽度类型设备。

md

中等宽度类型设备。

lg

大宽度类型设备。

xl

特大宽度类型设备。

xxl

超大宽度类型设备。

2.布局的总列数

GridRow中通过columns设置栅格布局的总列数,

1. 默认值为12,即在未设置columns时,任何断点下,栅格布局被分成12列

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown,Color.Red, Color.Orange, Color.Yellow, Color.Green];
  2. ...
  3. GridRow() {
  4. ForEach(this.bgColors, (item, index) => {
  5. GridCol() {
  6. Row() {
  7. Text(`${index + 1}`)
  8. }.width('100%').height('50')
  9. }.backgroundColor(item)
  10. })
  11. }

2. 当columns为自定义值,栅格布局在任何尺寸设备下都被分为columns列,如下面代码被分成4列,每个子元素默认占用一列

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  2. GridRow({ columns: 4 }) {
  3. ForEach(this.bgColors, (item, index) => {
  4. GridCol() {
  5. Row() {
  6. Text(`${index + 1}`)
  7. }.width('100%').height('50')
  8. }.backgroundColor(item)
  9. })
  10. }
  11. .width('100%').height('100%')

3.当columns类型为GridRowColumnOption时,支持下面六种不同尺寸(xs, sm, md, lg, xl, xxl)设备的总列数设置,各个尺寸下数值可不同

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
  2. GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {
  3. ForEach(this.bgColors, (item, index) => {
  4. GridCol() {
  5. Row() {
  6. Text(`${index + 1}`)
  7. }.width('100%').height('50')
  8. }.backgroundColor(item)
  9. })
  10. }

如代码所示,只设置sm, md的栅格总列数(sm:4, md:8),则较小的尺寸使用默认columns值12,较大的尺寸使用前一个尺寸的columns。故较小尺寸的xs:12,较大尺寸的参照md的设置,lg:8, xl:8, xxl:8

3.排列方向

栅格布局中,通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row(从左往右排列)或GridRowDirection.RowReverse(从右往左排列)

子组件从左往右排列

GridRow({ direction: GridRowDirection.Row }){}

子组件从右往左排列

GridRow({ direction: GridRowDirection.RowReverse }){}

4.子组件间距

GridRow中通过gutter属性设置子元素在水平和垂直方向的间距

1.当gutter类型为number时,同时设置栅格子组件间水平和垂直方向边距且相等,下面代码设置子组件水平垂直方向距离相邻元素都是10

 GridRow({ gutter: 10 }){}

2.当gutter类型为GutterOption时,单独设置栅格子组件水平垂直边距,x属性为水平方向间距,y为垂直方向间距,下面代码设置子组件水平方向相邻元素距离20,垂直方向相邻元素距离50

GridRow({ gutter: { x: 20, y: 50 } }){}

三、格栅容器子组件

GridCol组件作为GridRow组件的子组件,通过给GridCol传参或者设置属性两种方式,设置span(占用列数),offset(偏移列数),order(元素序号)的值

1.span

子组件占栅格布局的列数,决定了子组件的宽度,默认为1

1.当类型为number时,子组件在所有尺寸设备下占用的列数相同

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  2. ...
  3. GridRow({ columns: 8 }) {
  4. ForEach(this.bgColors, (color, index) => {
  5. GridCol({ span: 2 }) {
  6. Row() {
  7. Text(`${index}`)
  8. }.width('100%').height('50vp')
  9. }
  10. .backgroundColor(color)
  11. })
  12. }

GridRow({ columns: 8 }):栅格组件定义8列

GridCol({ span: 2 }):栅格子组件定义一个子组件占用两列

如下图下图显示,4个栅格子组件占用8列,显示在一行

2.当类型为GridColColumnOption时,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备中子组件所占列数设置,各个尺寸下数值可不同

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  2. ...
  3. GridRow({ columns: 8 }) {
  4. ForEach(this.bgColors, (color, index) => {
  5. GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
  6. Row() {
  7. Text(`${index}`)
  8. }.width('100%').height('50vp')
  9. }
  10. .backgroundColor(color)
  11. })
  12. }

2.offset

栅格子组件相对于前一个子组件的偏移列数,默认为0

1.当类型为number时,子组件偏移相同列数

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  2. ...
  3. GridRow() {
  4. ForEach(this.bgColors, (color, index) => {
  5. GridCol({ offset: 2 }) {
  6. Row() {
  7. Text('' + index)
  8. }.width('100%').height('50vp')
  9. }
  10. .backgroundColor(color)
  11. })
  12. }

GridRow():栅格组件默认12列

GridCol({ offset: 2 }):栅格子组件默认每个占用一列,offset:2定义子组件偏移2列

如下图下图显示,4个栅格子组件占用12列,每两个子组件隔2列

2.当类型为GridColColumnOption时,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备中子组件所占列数设置,各个尺寸下数值可不同

  1. @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  2. ...
  3. GridRow() {
  4. ForEach(this.bgColors, (color, index) => {
  5. GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
  6. Row() {
  7. Text('' + index)
  8. }.width('100%').height('50vp')
  9. }
  10. .backgroundColor(color)
  11. })
  12. }

3.order

栅格子组件的序号,决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时,order较小的组件在前,较大的在后。当子组件部分设置order,部分不设置order时,未设置order的子组件依次排序靠前,设置了order的子组件按照数值从小到大排列。

1.当类型为number时,子组件在任何尺寸下排序次序一致

  1. GridRow() {
  2. GridCol({ order: 4 }) {
  3. Row() {
  4. Text('1')
  5. }.width('100%').height('50vp')
  6. }.backgroundColor(Color.Red)
  7. GridCol({ order: 3 }) {
  8. Row() {
  9. Text('2')
  10. }.width('100%').height('50vp')
  11. }.backgroundColor(Color.Orange)
  12. GridCol({ order: 2 }) {
  13. Row() {
  14. Text('3')
  15. }.width('100%').height('50vp')
  16. }.backgroundColor(Color.Yellow)
  17. GridCol({ order: 1 }) {
  18. Row() {
  19. Text('4')
  20. }.width('100%').height('50vp')
  21. }.backgroundColor(Color.Green)
  22. }

GridRow():栅格组件默认12列

GridCol({ order: X }):定义4个栅格子组件,Text(4)所在的GridCol定义order为1最小,应该排最前面,Text1所在的GridCol定义order为4最大,应该排最后如下图所示

2.当类型为GridColColumnOption时,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备中子组件排序次序设置

四、使用场景

栅格组件也可以嵌套使用,完成一些复杂的布局,以下示例中,栅格把整个空间分为12份。第一层GridRow嵌套GridCol,分为中间大区域以及“footer”区域。第二层GridRow嵌套GridCol,分为“left”和“right”区域。子组件空间按照上一层父组件的空间划分,粉色的区域是屏幕空间的12列,绿色和蓝色的区域是父组件GridCol的12列,依次进行空间的划分

  1. @Entry
  2. @Component
  3. struct GridRowExample {
  4. build() {
  5. GridRow() {
  6. GridCol({ span: { sm: 12 } }) {
  7. GridRow() {
  8. GridCol({ span: { sm: 2 } }) {
  9. Row() {
  10. Text('left').fontSize(24)
  11. }
  12. .justifyContent(FlexAlign.Center)
  13. .height('90%')
  14. }.backgroundColor('#ff41dbaa')
  15. GridCol({ span: { sm: 10 } }) {
  16. Row() {
  17. Text('right').fontSize(24)
  18. }
  19. .justifyContent(FlexAlign.Center)
  20. .height('90%')
  21. }.backgroundColor('#ff4168db')
  22. }
  23. .backgroundColor('#19000000')
  24. .height('100%')
  25. }
  26. GridCol({ span: { sm: 12 } }) {
  27. Row() {
  28. Text('footer').width('100%').textAlign(TextAlign.Center)
  29. }.width('100%').height('10%').backgroundColor(Color.Pink)
  30. }
  31. }.width('100%').height(300)
  32. }
  33. }


总结

本文详细学习常见布局方式-栅格布局,学习栅格布局中列数控制,子组件的排列方向已经间距控制,也学习了栅格容器子组件占用列数以及偏移和顺序的定义方式。下文将如何创建List。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/760307
推荐阅读
相关标签
  

闽ICP备14008679号