柵格布局（GridRow/GridCol）
GridRow為柵格容器組件徘跪，需與柵格子組件GridCol在柵格布局場景中聯(lián)合使用杆兵。
柵格容器GridRow
柵格系統(tǒng)斷點
柵格系統(tǒng)以設備的水平寬度（屏幕密度像素值，單位vp）作為斷點依據(jù)，定義設備的寬度類型坚嗜，形成了一套斷點規(guī)則。開發(fā)者可根據(jù)需求在不同的斷點區(qū)間實現(xiàn)不同的頁面布局效果诱建。
| 斷點名稱 | 設備描述 |
|---|---|
| xs | 最小寬度類型設備碟绑。 |
| sm | 小寬度類型設備。 |
| md | 中等寬度類型設備押袍。 |
| lg | 大寬度類型設備凯肋。 |
| xl | 特大寬度類型設備。 |
| xxl | 超大寬度類型設備午笛。 |
-
針對斷點位置药磺，開發(fā)者根據(jù)實際使用場景，通過一個單調(diào)遞增數(shù)組設置木缝。由于breakpoints最多支持六個斷點围辙，單調(diào)遞增數(shù)組長度最大為5。
表示啟用xs矫俺、sm掸冤、md稿湿、lg、xl共5個斷點饺藤，小于320vp為xs涕俗，320vp-520vp為sm，520vp-840vp為md丸卷，840vp-1080vp為lg询刹，大于1080vp為xl
breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}
柵格的默認列數(shù)12列谜嫉，可以通過斷點設置將應用寬度分成六個區(qū)間沐兰，在各區(qū)間中蔽挠，每個柵格子元素占用的列數(shù)均不同瓜浸。
- span 可以設置柵格占用多少列
@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, // 在最小寬度類型設備上插佛，柵格子組件占據(jù)的柵格容器2列量窘。
sm: 3, // 在小寬度類型設備上蚌铜，柵格子組件占據(jù)的柵格容器3列。
md: 4, // 在中等寬度類型設備上囚痴，柵格子組件占據(jù)的柵格容器4列审葬。
lg: 6, // 在大寬度類型設備上，柵格子組件占據(jù)的柵格容器6列成箫。
xl: 8, // 在特大寬度類型設備上，柵格子組件占據(jù)的柵格容器8列混驰。
xxl: 12 // 在超大寬度類型設備上栖榨，柵格子組件占據(jù)的柵格容器12列。
}
}) {
Row() {
Text(`${index}`)
}.width("100%").height('50vp')
}.backgroundColor(color)
})
}
0000000000011111111.20231204103822.47257113918867463806512134720145.gif
布局的總列數(shù)
GridRow中通過columns設置柵格布局的總列數(shù)。
- columns默認值為12愚争，即在未設置columns時轰枝，任何斷點下，柵格布局被分成12列步淹。
@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];
...
GridRow() {
ForEach(this.bgColors, (item, index) => {
GridCol() {
Row() {
Text(`${index + 1}`)
}.width('100%').height('50')
}.backgroundColor(item)
})
}
18c665aed31.png
- 當columns為自定義值缭裆，柵格布局在任何尺寸設備下都被分為columns列
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
@State currentBp: string = 'unknown';
...
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%')
18c665d2128.png
- 當columns類型為GridRowColumnOption時澈驼，支持下面六種不同尺寸（xs, sm, md, lg, xl, xxl）設備的總列數(shù)設置盅藻，各個尺寸下數(shù)值可不同。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {
ForEach(this.bgColors, (item, index) => {
GridCol() {
Row() {
Text(`${index + 1}`)
}.width('100%').height('50')
}.backgroundColor(item)
})
}
option.gif
排列方向
- 子組件默認從左往右排列勃蜘。
GridRow({ direction: GridRowDirection.Row }){}
18c6663393d.png
-
子組件從右往左排列缭贡。
GridRow({ direction: GridRowDirection.RowReverse }){}
18c66636f05.png
子組件間距
GridRow中通過gutter屬性設置子元素在水平和垂直方向的間距阳惹。
- 當gutter類型為number時眶俩，同時設置柵格子組件間水平和垂直方向邊距且相等颠印。下例中，設置子組件水平與垂直方向距離相鄰元素的間距為10止潮。
GridRow({ gutter: 10 }){}
18c6664da23.png
-
當gutter類型為GutterOption時喇闸，單獨設置柵格子組件水平垂直邊距询件，x屬性為水平方向間距，y為垂直方向間距橘沥。
GridRow({ gutter: { x: 20, y: 50 } }){}
18c6665291d.png
子組件GridCol
GridCol組件作為GridRow組件的子組件座咆，通過給GridCol傳參或者設置屬性兩種方式，設置span（占用列數(shù)）堤舒，offset（偏移列數(shù)）哺呜，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 })
span
子組件占柵格布局的列數(shù)线得，決定了子組件的寬度徐伐，默認為1呵晨。
-
當類型為number時熬尺，子組件在所有尺寸設備下占用的列數(shù)相同粱哼。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; ... GridRow({ columns: 8 }) { ForEach(this.bgColors, (color, index) => { GridCol({ span: 2 }) { Row() { Text(`${index}`) }.width('100%').height('50vp') } .backgroundColor(color) }) }
18c66675bf2.png
-
當類型為GridColColumnOption時，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設備中子組件所占列數(shù)設置,各個尺寸下數(shù)值可不同胯舷。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]; ... GridRow({ columns: 8 }) { ForEach(this.bgColors, (color, index) => { GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { Row() { Text(`${index}`) }.width('100%').height('50vp') } .backgroundColor(color) }) }
span.gif
offset
柵格子組件相對于前一個子組件的偏移列數(shù)桑嘶，默認為0逃顶。
- 當類型為number時，子組件偏移相同列數(shù)霸褒。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow() {
ForEach(this.bgColors, (color, index) => {
GridCol({ offset: 2 }) {
Row() {
Text('' + index)
}.width('100%').height('50vp')
}
.backgroundColor(color)
})
}
18c666dfe2e.png
柵格默認分成12列废菱，每一個子組件默認占1列抖誉，偏移2列，每個子組件及間距共占3列梳凛，一行放四個子組件梳杏。
- 當類型為GridColColumnOption時十性，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設備中子組件所占列數(shù)設置,各個尺寸下數(shù)值可不同。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow() {
ForEach(this.bgColors, (color, index) => {
GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row() {
Text('' + index)
}.width('100%').height('50vp')
}
.backgroundColor(color)
})
}
order
柵格子組件的序號楷掉，決定子組件排列次序烹植。當子組件不設置order或者設置相同的order, 子組件按照代碼順序展示愕贡。當子組件設置不同的order時固以，order較小的組件在前，較大的在后诫钓。
當子組件部分設置order篙螟，部分不設置order時遍略，未設置order的子組件依次排序靠前场梆，設置了order的子組件按照數(shù)值從小到大排列纯路。
-
當類型為number時驰唬，子組件在任何尺寸下排序次序一致。
GridRow() { GridCol({ order: 4 }) { Row() { Text('1') }.width('100%').height('50vp') }.backgroundColor(Color.Red) GridCol({ order: 3 }) { Row() { Text('2') }.width('100%').height('50vp') }.backgroundColor(Color.Orange) GridCol({ order: 2 }) { Row() { Text('3') }.width('100%').height('50vp') }.backgroundColor(Color.Yellow) GridCol({ order: 1 }) { Row() { Text('4') }.width('100%').height('50vp') }.backgroundColor(Color.Green) }
18c666f570c.png
- 當類型為GridColColumnOption時，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設備中子組件排序次序設置搓逾。在xs設備中霞篡，子組件排列順序為1234；sm為2341污淋，md為3412余掖，lg為2431盐欺。
GridRow() {
GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {
Row() {
Text('1')
}.width('100%').height('50vp')
}.backgroundColor(Color.Red)
GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {
Row() {
Text('2')
}.width('100%').height('50vp')
}.backgroundColor(Color.Orange)
GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {
Row() {
Text('3')
}.width('100%').height('50vp')
}.backgroundColor(Color.Yellow)
GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {
Row() {
Text('4')
}.width('100%').height('50vp')
}.backgroundColor(Color.Green)
}
order.gif
柵格組件的嵌套使用
柵格組件也可以嵌套使用冗美，完成一些復雜的布局。
以下示例中务嫡，柵格把整個空間分為12份漆改。第一層GridRow嵌套GridCol挫剑，分為中間大區(qū)域以及“footer”區(qū)域柱衔。第二層GridRow嵌套GridCol愉棱，分為“l(fā)eft”和“right”區(qū)域奔滑。子組件空間按照上一層父組件的空間劃分顺少，粉色的區(qū)域是屏幕空間的12列，綠色和藍色的區(qū)域是父組件GridCol的12列梅猿，依次進行空間的劃分袱蚓。
@Entry
@Component
struct GridRowExample {
build() {
GridRow() {
GridCol({ span: { sm: 12 } }) {
GridRow() {
GridCol({ span: { sm: 2 } }) {
Row() {
Text('left').fontSize(24)
}
.justifyContent(FlexAlign.Center)
.height('90%')
}.backgroundColor('#ff41dbaa')
GridCol({ span: { sm: 10 } }) {
Row() {
Text('right').fontSize(24)
}
.justifyContent(FlexAlign.Center)
.height('90%')
}.backgroundColor('#ff4168db')
}
.backgroundColor('#19000000')
.height('100%')
}
GridCol({ span: { sm: 12 } }) {
Row() {
Text('footer').width('100%').textAlign(TextAlign.Center)
}.width('100%').height('10%').backgroundColor(Color.Pink)
}
}.width('100%').height(300)
}
}
18c66705c2c.png
