GridRow
为栅格容器组件,需与栅格子组件 GridCol
联合使用。
GridRow
中通过 columns
参数设置栅格布局的总列数,columns
等于 12(默认值)。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
}
}
}
示例代码中,设置栅格布局的Columns=4
,表示4个GridCol
子组件会占用一行。
GridRow
的 direction
参数来指定 GridCol
在栅格容器中的排列方向。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
}
}
}
GridRow
中通过 gutter
参数设置子元素在水平(x轴)和垂直(y轴)方向的间距。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
GridCol() {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
GridCol
中通过 span
参数设置在栅格布局中占的列数,span 等于 1(默认值)。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
// 设置一个GridCol占栅格布局的4列
GridCol({span: 4}) {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
GridCol
中通过 offset
参数设置在栅格布局中偏移的列数,offset 等于 0(默认值)。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
// 设置一个GridCol占栅格布局的2列
// 设置GridCol偏移1列
GridCol({span: 2, offset: 1}) {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
GridCol
中通过 order
参数设置在栅格布局中排列顺序,order
等于0(默认)。order
较小的组件在前,较大的在后。没有设置order
参数的,按照代码的先后顺序排列。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
// 设置GridCol的order为0
GridCol({order: 0}) {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
// 设置GridCol的order为1
GridCol({order: 1}) {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
// 设置一个GridCol占栅格布局的2列
// 设置GridCol偏移1列
// 设置GridCol的顺序为1
GridCol({span: 2, offset: 1, order: 2}) {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
示例代码中,第一个GridCol
子组件没有设置order
,order
默认等于0;第二个GridCol
子组件设置order
等于0;第三个GridCol
子组件设置order
等于1;第四个GridCol
子组件没有设置order
,order
默认等于0;第五个GridCol
子组件设置order
等于2。所以最终显示的顺序为:第一个GridCol
、第二个GridCol
、第四个GridCol
、第三个GridCol
、第五个GridCol
栅格系统以设备的水平宽度作为断点依据,定义设备的宽度类型,形成了一套断点规则。
栅格系统默认断点将设备宽度分为 xs、sm、md、lg 四类:
GridRow
中通过 breakpoints
参数自定义修改断点的取值范围,最多支持 6 个断点:
GridRow({
breakpoints: {
// 表示启用xs、sm、md、lg、xl、xxl共6个断点,小于200vp为xs,200vp-300vp为sm,300vp-400vp为md,4000vp-500vp为lg,500vp-600vp为xl,大于600vp为xxl
value: ["200vp", "300vp", "400vp", "500vp", "600vp"],
reference: BreakpointsReference.WindowSize,
},
});
GridRow
的 columns 参数,GridCol
的 span、offset 参数可以根据断点分别设置不同的值。
例如:GridRow
的 columns 参数设置
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({
columns: {
xs: 2,
sm: 2,
md: 4,
lg: 4
}
}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol({order: 0}) {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol({order: 1}) {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
}
}
}