HarmonyOS应用开发学习笔记 UI布局学习 栅格布局（GridRow/GridCol）
HarmonyOS应用开发学习笔记 UI布局学习 相对布局 （RelativeContainer）
一、代码示例
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('90%')
Row() {
GridRow({ columns: 8 }) {
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('90%')
二、常用属性
1、排列方向
- 通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向
| 代码 | 描述 |
|---|---|
| GridRowDirection.Row | 从左往右排列 |
| GridRowDirection.RowReverse | 从右往左排列 |
- 左往右排列
//子组件默认从左往右排列
GridRow({ direction: GridRowDirection.Row }){}
- 子组件从右往左排列
GridRow({ direction: GridRowDirection.RowReverse }){}
2、子组件间距
当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。
- 垂直和水平间距都为10
GridRow({ gutter: 10 }){}
- x属性为水平方向间距，y为垂直方向间距
GridRow({ gutter: { x: 20, y: 50 } }){}
3、子组件GridCol
- 通过给GridCol传参或者设置属性两种方式
| 代码 | 描述 |
|---|---|
| span | 占用列数 |
| offset | 偏移列数 |
| order | 元素序号 |
设置span
GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })
设置offset
GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
GridCol(){}.offset(2)
GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 })
设置order
GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)
GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })
三、不同尺寸的适配
GridRow为栅格容器组件，需与栅格子组件GridCol在栅格布局场景中联合使用。
栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
| 断点名称 | 取值范围（vp） | 设备描述 |
|---|---|---|
| xs | [0, 320） | 最小宽度类型设备。 |
| sm | [320, 520) | 小宽度类型设备。 |
| md | [520, 840) | 中等宽度类型设备。 |
| lg | [840, +∞) | 大宽度类型设备。 |
- 例如，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
}
}) {
ForEach(this.bgColors, (color, index) => {
GridCol({
span: {
xs: 2, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
md: 4, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
xl: 8, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
}
}) {
Row() {
Text(`${index}`)
}.width("100%").height('50vp')
}.backgroundColor(color)
})
}
原文地址：https://blog.csdn.net/qq_38355313/article/details/135500987
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！