OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow

素年锦时静待君丶

发布于 2023-4-17 18:25

浏览

0收藏

版本：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%")
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

Flex

以弹性方式布局子组件的容器组件。

说明：
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

权限列表

无

子组件

可以包含子组件。

接口

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

标准Flex布局容器。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数:

参数名	参数类型	必填	默认值	参数描述
direction	FlexDirection	否	FlexDirection.Row	子组件在Flex容器上排列的方向，即主轴的方向。
wrap	FlexWrap	否	FlexWrap.NoWrap	Flex容器是单行/列还是多行/列排列。说明：在多行布局时，通过交叉轴方向，确认新行堆叠方向。
justifyContent	FlexAlign	否	FlexAlign.Start	所有子组件在Flex容器主轴上的对齐格式。
alignItems	ItemAlign	否	ItemAlign.Start	所有子组件在Flex容器交叉轴上的对齐格式。
alignContent	FlexAlign	否	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%')
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

// 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%')
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

// 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%')
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

// 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%')
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

// 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%')
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

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	是	断点发生变化时触发回调取值为`"xs"`、`"sm"`、`"md"`、`"lg"`、`"xl"`、`"xxl"`。

示例

// 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 })
  }
}

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow-鸿蒙开发者社区

文章转载自：https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md/

分类

卡片开发

三方件

标签

OpenHarmony

已于2023-4-17 18:25:53修改

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发-容器组件Counter/Flex/GridCol/GridRow

Counter

子组件

接口

属性

事件

示例

Flex

权限列表

子组件

接口

示例

GridCol

子组件

接口

属性

GridColColumnOption

示例

GridRow

子组件

接口

GutterOption

GridRowColumnOption

GridRowSizeOption

BreakPoints

BreakpointsReference枚举类型

GridRowDirection枚举类型

属性

事件

onBreakpointChange

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看