OpenHarmony应用开发-容器组件Refresh/RelativeContainer/Row

素年锦时静待君丶

发布于 2023-4-17 18:27

6946浏览

0收藏

版本：v3.2 Release

Refresh

可以进行页面下拉操作并显示刷新动效的容器组件。

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

子组件

支持单个子组件。

接口

Refresh(value: { refreshing: boolean, offset?: number | string , friction?: number | string })

参数：

参数	参数名	必填	参数描述
refreshing	boolean	是	当前组件是否正在刷新。该参数支持$$双向绑定变量。
offset	string \| number	否	下拉起点距离组件顶部的距离。默认值：16，单位vp 说明：不支持百分比，不支持负数
friction	number \| string	否	下拉摩擦系数，取值范围为0到100。默认值：62 - 0表示下拉刷新容器不跟随手势下拉而下拉。 - 100表示下拉刷新容器紧紧跟随手势下拉而下拉。 - 数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。

属性

支持通用属性。

事件

除支持通用事件外，还支持以下事件：

名称	描述
onStateChange(callback: (state: RefreshStatus) => void)	当前刷新状态变更时，触发回调。 - state：刷新状态。
onRefreshing(callback: () => void)	进入刷新状态时触发回调。

RefreshStatus枚举说明

名称	描述
Inactive	默认未下拉状态。
Drag	下拉中，下拉距离小于刷新距离。
OverDrag	下拉中，下拉距离超过刷新距离。
Refresh	下拉结束，回弹至刷新距离，进入刷新状态。
Done	刷新结束，返回初始状态（顶部）。

示例

// xxx.ets
@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State counter: number = 0

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
        Text('Pull Down and refresh: ' + this.counter)
          .fontSize(30)
          .margin(10)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.counter++
          this.isRefreshing = false
        }, 1000)
        console.log('onRefreshing test')
      })
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

OpenHarmony应用开发-容器组件Refresh/RelativeContainer/Row-鸿蒙开发者社区

RelativeContainer

相对布局组件，用于复杂场景中元素对齐的布局。

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

规则说明

容器内子组件区分水平方向，垂直方向：

○ 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。

○ 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。

子组件可以将容器或者其他子组件设为锚点：

○ 参与相对布局的容器内组件必须设置id，不设置id的组件不显示，容器id固定为__container__。

○ 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。

○ 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。

○ 对齐后需要额外偏移可设置offset。

特殊情况

○ 互相依赖，环形依赖时容器内子组件全部不绘制。

○ 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。

子组件

支持多个子组件。

接口

RelativeContainer()

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

示例

@Entry
@Component
struct Index {
  build() {
    Row() {

      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row2")

        Row().height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .id("row3")

        Row()
          .backgroundColor("#FF9966")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row1", align: HorizontalAlign.End}
          })
          .id("row4")

        Row()
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "row2", align: HorizontalAlign.Start},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row5")
      }
      .width(300).height(300)
      .margin({left: 100})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

OpenHarmony应用开发-容器组件Refresh/RelativeContainer/Row-鸿蒙开发者社区

Row

沿水平方向布局容器。

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

子组件

可以包含子组件。

接口

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

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

参数：

参数名	参数类型	必填	参数描述
space	string \| number	否	横向布局元素间距。从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0，单位vp 说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

属性

名称	参数类型	描述
alignItems	VerticalAlign	设置子组件在垂直方向上的对齐格式。默认值：VerticalAlign.Center 从API version 9开始，该接口支持在ArkTS卡片中使用。
justifyContent⁸⁺	FlexAlign	设置子组件在水平方向上的对齐格式。 FlexAlign.Start 从API version 9开始，该接口支持在ArkTS卡片中使用。

示例

// xxx.ets
@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      // 设置子组件水平方向的间距为5
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 5 }) {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').height(107).border({ width: 1 })

      // 设置子元素垂直方向对齐方式
      Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })

      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })

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

      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

OpenHarmony应用开发-容器组件Refresh/RelativeContainer/Row-鸿蒙开发者社区

RowSplit

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

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

子组件

可以包含子组件

接口

RowSplit()

属性

名称	参数类型	描述
resizeable	boolean	分割线是否可拖拽，默认为false。

说明： RowSplit的分割线最小能拖动到刚好包含子组件。
在真机中查看拖动效果，预览器中不支持拖动。
不支持clip、margin通用属性。

示例

// xxx.ets
@Entry
@Component
struct RowSplitExample {
  build() {
    Column() {
      Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
      RowSplit() {
        Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
        Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
        Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
      }
      .resizeable(true) // 可拖动
      .width('90%').height(100)
    }.width('100%').margin({ top: 5 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

OpenHarmony应用开发-容器组件Refresh/RelativeContainer/Row-鸿蒙开发者社区

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

分类

卡片开发

三方库

标签

OpenHarmony

已于2023-4-17 18:27:09修改

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用开发-容器组件Refresh/RelativeContainer/Row

Refresh

子组件

接口

属性

事件

RefreshStatus枚举说明

示例

RelativeContainer

规则说明

子组件

接口

示例

Row

子组件

接口

属性

示例

RowSplit

子组件

接口

属性

示例

目录

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