HarmonyOS API:容器组件

joytrian
发布于 2023-3-24 16:46
浏览
0收藏

版本:v3.1 Beta

Column

更新时间: 2023-02-17 09:19


沿垂直方向布局的容器。


说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

Column(value?: {space?: string | number})

参数:

参数名

参数类型

必填

参数描述

space

string | number

纵向布局元素垂直方向间距。

从API version 9开始,space为负数时不生效。

默认值:0

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

alignItems

​HorizontalAlign​

设置子组件在水平方向上的对齐格式。

默认值:HorizontalAlign.Center

justifyContent8+

​FlexAlign​

设置子组件在垂直方向上的对齐格式。

默认值:FlexAlign.Start

示例

// xxx.ets
@Entry
@Component
struct ColumnExample {
  build() {
    Column() {
      // 设置子元素垂直方向间距为5
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column({ space: 5 }) {
        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
        Column().width('100%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(100).border({ width: 1 })

      // 设置子元素水平方向对齐方式
      Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })

      Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })

      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
      
      // 设置子元素垂直方向的对齐方式
      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)

      Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
      }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
    }.width('100%').padding({ top: 5 })
  }
}

HarmonyOS API:容器组件-鸿蒙开发者社区

ColumnSplit

更新时间: 2023-02-17 09:19


将子组件纵向布局,并在每个子组件之间插入一根横向的分割线。


说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

ColumnSplit()

属性

名称

参数类型

描述

resizeable

boolean

分割线是否可拖拽,默认为false。

说明

与RowSplit相同,ColumnSplit的分割线最小能拖动到刚好包含子组件。

在真机中查看拖动效果,预览器中不支持拖动。

示例

// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
  build() {
    Column(){
      Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
      ColumnSplit() {
        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
      }
      .resizeable(true) // 可拖动
      .width('90%').height('60%')
    }.width('100%')
  }
}

HarmonyOS API:容器组件-鸿蒙开发者社区

Counter

更新时间: 2023-02-17 09:19


计数器组件,提供相应的增加或者减少的计数操作。


说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

Counter()

事件

不支持通用事件和手势, 仅支持如下事件:

名称

功能描述

onInc(event: () => void)

监听数值增加事件。

onDec(event: () => void)

监听数值减少事件。

示例

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

HarmonyOS API:容器组件-鸿蒙开发者社区

GridCol

更新时间: 2023-02-17 09:19


栅格子组件,必须作为栅格容器组件(​​GridRow​​)的子组件使用。


说明

该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})

参数:

参数名

类型

必填

说明

span

number | ​​GridColColumnOption​

占用列数。span为0表示该元素不参与布局计算,即不会被渲染。

默认值:1。

offset

number | ​​GridColColumnOption​

相对于前一个栅格子组件偏移的列数。

默认值:0。

order

number | ​​GridColColumnOption​

元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。

默认值:0。

属性

参数名

类型

必填

说明

span

number | GridColColumnOption

占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。

默认值:1。

offset

number | GridColColumnOption

相对于前一个栅格子组件偏移的列数。

默认值:0。

order

number | GridColColumnOption

元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。

默认值:0。

GridColColumnOption

参数名

参数类型

必填

参数描述

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

GridItem

更新时间: 2023-02-17 09:19


网格容器中单项内容容器。


说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含子组件。

接口

GridItem()

属性

名称

参数类型

描述

rowStart

number

指定当前元素起始行号。

rowEnd

number

指定当前元素终点行号。

columnStart

number

指定当前元素起始列号。

columnEnd

number

指定当前元素终点列号。

forceRebuild

boolean

设置在触发组件build时是否重新创建此节点。

默认值:false

selectable8+

boolean

当前GridItem元素是否可以被鼠标框选。

说明:

> 外层Grid容器的鼠标框选开启时,GridItem的框选才生效。

默认值:true

事件

名称

功能描述

onSelect(event: (isSelected: boolean) => void)8+

GridItem元素被鼠标框选的状态改变时触发回调。

isSelected:进入鼠标框选范围即被选中返回true, 移出鼠标框选范围即未被选中返回false。

示例

// xxx.ets
@Entry
@Component
struct GridItemExample {
  @State numbers: string[] = Array.apply(null, { length: 16 }).map(function (item, i) {
    return i.toString()
  })

  build() {
    Column() {
      Grid() {
        GridItem() {
          Text('4')
            .fontSize(16)
            .backgroundColor(0xFAEEE0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.rowStart(1).rowEnd(4)

        ForEach(this.numbers, (item) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }.forceRebuild(false)
        }, item => item)

        GridItem() {
          Text('5')
            .fontSize(16)
            .backgroundColor(0xDBD0C0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.columnStart(1).columnEnd(5)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .width('90%').height(300)
    }.width('100%').margin({ top: 5 })
  }
}

HarmonyOS API:容器组件-鸿蒙开发者社区

文章转载自:​​https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-griditem-0000001478061713-V3?catalogVersion=V3​

已于2023-3-24 16:46:50修改
收藏
回复
举报
回复
    相关推荐