OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow
版本:v3.2 Release
Counter
计数器组件,提供相应的增加或者减少的计数操作。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Counter()
从API version 9开始,该接口支持在ArkTS卡片中使用。
属性
支持通用属性。
事件
不支持通用事件和手势, 仅支持如下事件:
名称 | 功能描述 |
onInc(event: () => void) | 监听数值增加事件。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
onDec(event: () => void) | 监听数值减少事件。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
示例
// xxx.ets
@Entry
@Component
struct CounterExample {
@State value: number = 0
build() {
Column() {
Counter() {
Text(this.value.toString())
}.margin(100)
.onInc(() => {
this.value++
})
.onDec(() => {
this.value--
})
}.width("100%")
}
}
Flex
以弹性方式布局子组件的容器组件。
说明:
权限列表
无
子组件
可以包含子组件。
接口
Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
标准Flex布局容器。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
direction | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向,即主轴的方向。 | |
wrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 说明: 在多行布局时,通过交叉轴方向,确认新行堆叠方向。 | |
justifyContent | 否 | FlexAlign.Start | 所有子组件在Flex容器主轴上的对齐格式。 | |
alignItems | 否 | ItemAlign.Start | 所有子组件在Flex容器交叉轴上的对齐格式。 | |
alignContent | 否 | FlexAlign.Start | 交叉轴中有额外的空间时,多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
示例
// xxx.ets
@Entry
@Component
struct FlexExample1 {
build() {
Column() {
Column({ space: 5 }) {
Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Row }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Column }) {
Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
}
.height(160)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
}
.height(160)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
// xxx.ets
@Entry
@Component
struct FlexExample2 {
build() {
Column() {
Column({ space: 5 }) {
Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) {
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.height(120)
.padding(10)
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
// xxx.ets
@Component
struct JustifyContentFlex {
justifyContent : number
build() {
Flex({ justifyContent: this.justifyContent }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}
}
@Entry
@Component
struct FlexExample3 {
build() {
Column() {
Column({ space: 5 }) {
Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.Start })
Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.Center })
Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.End })
Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween })
Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround })
Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly })
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
// xxx.ets
@Component
struct AlignItemsFlex {
alignItems : number
build() {
Flex({ alignItems: this.alignItems }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.size({width: '90%', height: 80})
.padding(10)
.backgroundColor(0xAFEEEE)
}
}
@Entry
@Component
struct FlexExample4 {
build() {
Column() {
Column({ space: 5 }) {
Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Auto })
Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Start })
Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Center })
Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.End })
Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Stretch })
Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Baseline })
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
// xxx.ets
@Component
struct AlignContentFlex {
alignContent: number
build() {
Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
}
.size({ width: '90%', height: 90 })
.padding(10)
.backgroundColor(0xAFEEEE)
}
}
@Entry
@Component
struct FlexExample5 {
build() {
Column() {
Column({ space: 5 }) {
Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.Start })
Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.Center })
Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.End })
Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceBetween })
Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceAround })
Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly })
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
GridCol
栅格子组件,必须作为栅格容器组件(GridRow)的子组件使用。
说明:
该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含单个子组件。
接口
GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 类型 | 必填 | 说明 |
span | number | GridColColumnOption | 否 | 占用列数。span为0表示该元素不参与布局计算,即不会被渲染。 默认值:1。 |
offset | number | GridColColumnOption | 否 | 相对于前一个栅格子组件偏移的列数。 默认值:0。 |
order | number | GridColColumnOption | 否 | 元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。 默认值:0。 |
属性
参数名 | 类型 | 必填 | 说明 |
span | number | GridColColumnOption | 否 | 占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。 默认值:1。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
gridColOffset | number | GridColColumnOption | 否 | 相对于前一个栅格子组件偏移的列数。 默认值:0。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
order | number | GridColColumnOption | 否 | 元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。 默认值:0。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
GridColColumnOption
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数名 | 参数类型 | 必填 | 参数描述 |
xs | number | 否 | 最小宽度类型设备。 |
sm | number | 否 | 小宽度类型设备。 |
md | number | 否 | 中等宽度类型设备。 |
lg | number | 否 | 大宽度类型设备。 |
xl | number | 否 | 特大宽度类型设备。 |
xxl | number | 否 | 超大宽度类型设备。 |
span
、offset
、order
属性按照xs
、sm
、md
、lg
、xl
、xxl
的顺序具有“继承性”,未设置值的断点将会从前一个断点取值。
参数\断点 | xs | sm | md | lg | xl | xxl |
span | 2 | 2 | 3 | 3 | 4 | 4 |
offset | 2 | 2 | 3 | 5 | 5 | 5 |
order | 20 | 20 | 20 | 3 | 3 | 3 |
示例
请参考栅格容器示例代码(GridRow)
GridRow
栅格容器组件,仅可以和栅格子组件(GridCol)在栅格布局场景中使用。
说明:
该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含GridCol子组件。
接口
GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 类型 | 必填 | 说明 |
gutter | Length | GutterOption | 否 | 栅格布局间距,x代表水平方向。 |
columns | number | GridRowColumnOption | 否 | 设置布局列数。 |
breakpoints | BreakPoints | 否 | 设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。 |
direction | GridRowDirection | 否 | 栅格布局排列方向。 |
GutterOption
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数名 | 参数类型 | 必填 | 参数描述 |
x | Length | GridRowSizeOption | 否 | 水平gutter option。 |
y | Length | GridRowSizeOption | 否 | 竖直gutter option。 |
GridRowColumnOption
栅格在不同宽度设备类型下,栅格列数。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数名 | 参数类型 | 必填 | 参数描述 |
xs | number | 否 | 最小宽度类型设备。 |
sm | number | 否 | 小宽度类型设备。 |
md | number | 否 | 中等宽度类型设备。 |
lg | number | 否 | 大宽度类型设备。 |
xl | number | 否 | 特大宽度类型设备。 |
xxl | number | 否 | 超大宽度类型设备。 |
GridRowSizeOption
栅格在不同宽度设备类型下,gutter的大小。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数名 | 参数类型 | 必填 | 参数描述 |
xs | Length | 否 | 最小宽度类型设备。 |
sm | Length | 否 | 小宽度类型设备。 |
md | Length | 否 | 中等宽度类型设备。 |
lg | Length | 否 | 大宽度类型设备。 |
xl | Length | 否 | 特大宽度类型设备。 |
xxl | Length | 否 | 超大宽度类型设备。 |
BreakPoints
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数名 | 参数类型 | 必填 | 参数描述 |
value | Array<string> | 否 | 设置断点位置的单调递增数组。 默认值:[“320vp”, “520vp”, “840vp”] |
reference | BreakpointsReference | 否 | 断点切换参照物。 |
// 启用xs、sm、md共3个断点
breakpoints: {value: ["100vp", "200vp"]}
// 启用xs、sm、md、lg共4个断点,断点范围值必须单调递增
breakpoints: {value: ["320vp", "520vp", "840vp"]}
// 启用xs、sm、md、lg、xl共5个断点,断点范围数量不可超过断点可取值数量-1
breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
ts
BreakpointsReference枚举类型
从API version 9开始,该接口支持在ArkTS卡片中使用。
枚举名 | 描述 |
WindowSize | 以窗口为参照。 |
ComponentSize | 以容器为参照。 |
GridRowDirection枚举类型
从API version 9开始,该接口支持在ArkTS卡片中使用。
枚举名 | 描述 |
Row | 栅格元素按照行方向排列。 |
RowReverse | 栅格元素按照逆序行方向排列。 |
栅格最多支持xs、sm、md、lg、xl、xxl六个断点,且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4],各个断点取值如下:
断点 | 取值范围 |
xs | [0, n0) |
sm | [n0, n1) |
md | [n1, n2) |
lg | [n2, n3) |
xl | [n3, n4) |
xxl | [n4, INF) |
说明:
- 栅格元素仅支持Row/RowReverse排列,不支持column/ColumnReverse方向排列。
- 栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。
- 单个元素span大小超过最大列数时后台默认span为最大column数。
- 新一行的Offset加上子组件的span超过总列数时,将下一个子组件在新的一行放置。
- 例:Item1: GridCol({ span: 6}), Item2: GridCol({ span: 8, offset:11})
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
$\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$ | - | - | - | - | - | - |
- | - | - | - | - | |||||||
$\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$ |
属性
支持通用属性。
事件
onBreakpointChange
onBreakpointChange(callback: (breakpoints: string) => void)
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 说明 |
breakpoints | string | 是 | 断点发生变化时触发回调 取值为 |
示例
// xxx.ets
@Entry
@Component
struct GridRowExample {
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
@State currentBp: string = 'unknown'
build() {
Column() {
GridRow({
columns: 5,
gutter: { x: 5, y: 10 },
breakpoints: { value: ["400vp", "600vp", "800vp"],
reference: BreakpointsReference.WindowSize },
direction: GridRowDirection.Row
}) {
ForEach(this.bgColors, (color) => {
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
Row().width("100%").height("20vp")
}.borderColor(color).borderWidth(2)
})
}.width("100%").height("100%")
.onBreakpointChange((breakpoint) => {
this.currentBp = breakpoint
})
}.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
.border({ color: '#880606', width: 2 })
}
}