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/​

已于2023-4-17 18:25:53修改
收藏
回复
举报
回复
    相关推荐