东莞建站,网站用视频做背景,杭州网站推广,贵州省建设厅住房和城乡建设官网ArkUI栅格布局#xff08;GridRow/GrowCol#xff09; 1. 栅格布局概述2. GridRow的使用2.1 设置栅格布局的总列数2.2 设置栅格布局的排列方向2.3 设置栅格布局中子组件间距 3. GridCol的使用3.1 设置一个GridCol占栅格布局的列数3.2 设置GridCol在栅格布局中偏移列数3.3 设置… ArkUI栅格布局GridRow/GrowCol 1. 栅格布局概述2. GridRow的使用2.1 设置栅格布局的总列数2.2 设置栅格布局的排列方向2.3 设置栅格布局中子组件间距 3. GridCol的使用3.1 设置一个GridCol占栅格布局的列数3.2 设置GridCol在栅格布局中偏移列数3.3 设置GridCol在栅格布局中顺序 4. 栅格系统断点4.1 GridRow 自定义断点4.2 应用断点适配不同宽度设备 1. 栅格布局概述
GridRow 为栅格容器组件需与栅格子组件 GridCol 联合使用。
栅格布局中将页面划分为等宽的列数和行数栅格布局中可以调整列与列之间和行与行之间的间距栅格布局中当页面元素的数量超出了一行或一列的容量时自动换到下一行或下一列
2. GridRow的使用
2.1 设置栅格布局的总列数
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)}}
}示例代码中设置栅格布局的Columns4表示4个GridCol子组件会占用一行。
2.2 设置栅格布局的排列方向
GridRow 的 direction 参数来指定 GridCol 在栅格容器中的排列方向。
GridRowDirection.Row从左往右排列默认值GridRowDirection.RowReverse从右往左排列
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)}}
}2.3 设置栅格布局中子组件间距
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)}}
}3. GridCol的使用
3.1 设置一个GridCol占栅格布局的列数
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)}}
}3.2 设置GridCol在栅格布局中偏移列数
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)}}
}3.3 设置GridCol在栅格布局中顺序
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为0GridCol({order: 0}) {Text(第二个GridCol)}.backgroundColor(Color.Green)// 设置GridCol的order为1GridCol({order: 1}) {Text(第三个GridCol)}.backgroundColor(Color.Blue)GridCol() {Text(第四个GridCol)}.backgroundColor(Color.Pink)// 设置一个GridCol占栅格布局的2列// 设置GridCol偏移1列// 设置GridCol的顺序为1GridCol({span: 2, offset: 1, order: 2}) {Text(第五个GridCol)}.backgroundColor(Color.Orange)}}
}示例代码中第一个GridCol子组件没有设置orderorder默认等于0第二个GridCol子组件设置order等于0第三个GridCol子组件设置order等于1第四个GridCol子组件没有设置orderorder默认等于0第五个GridCol子组件设置order等于2。所以最终显示的顺序为第一个GridCol、第二个GridCol、第四个GridCol、第三个GridCol、第五个GridCol
4. 栅格系统断点 栅格系统以设备的水平宽度作为断点依据定义设备的宽度类型形成了一套断点规则。 栅格系统默认断点将设备宽度分为 xs、sm、md、lg 四类
xs最小宽度类型设备[0, 320sm小宽度类型设备[320, 520)md中等宽度类型设备[520, 840)lg大宽度类型设备[840, ∞)
4.1 GridRow 自定义断点
GridRow 中通过 breakpoints 参数自定义修改断点的取值范围最多支持 6 个断点
xs最小宽度类型设备sm小宽度类型设备md中等宽度类型设备lg大宽度类型设备xl特大宽度类型设备xxl超大宽度类型设备
GridRow({breakpoints: {// 表示启用xs、sm、md、lg、xl、xxl共6个断点小于200vp为xs200vp-300vp为sm300vp-400vp为md4000vp-500vp为lg500vp-600vp为xl大于600vp为xxlvalue: [200vp, 300vp, 400vp, 500vp, 600vp],reference: BreakpointsReference.WindowSize,},
});4.2 应用断点适配不同宽度设备
GridRow 的 columns 参数GridCol 的 span、offset 参数可以根据断点分别设置不同的值。
例如GridRow 的 columns 参数设置
xs最小宽度类型设备时栅格布局的列数为2sm小宽度类型设备时栅格布局的列数为2md中等宽度类型设备时栅格布局的列数为4lg大宽度类型设备时栅格布局的列数为4
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)}}
}
