容器组件：相对布局组件，堆叠容器，滑块视图容器（轮播图）（HarmonyOS学习第四课【4.6】）

最新推荐文章于 2024-08-19 19:34:01 发布

chenchen-IT

最新推荐文章于 2024-08-19 19:34:01 发布

阅读量1.2k

点赞数 32

分类专栏： HarmonyOS 文章标签：学习华为 harmonyos typescript

本文链接：https://blog.csdn.net/qq_58213084/article/details/139074950

版权

HarmonyOS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

相对布局组件

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

说明

该组件从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__。
- 此子组件某一方向上的三个位置（水平方向为left、middle、right，垂直方向为top、center、bottom）可以指定容器或其他子组件同方向的三个位置（水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）为锚点。若同方向上设置两个以上锚点，水平方向Start和Center优先，垂直方向Top和Center优先。例如，水平方向上指定了left以容器的HorizontalAlign.Start为锚点，middle以容器的HorizontalAlign.Center为锚点，又指定right的锚点为容器的HorizontalAlign.End，当组件的width和容器的width不能同时满足3条约束规则时，优先取Start和Center的约束规则。
- 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上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%')
  }
}

堆叠容器

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

说明

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

子组件

可以包含子组件。

接口

Stack(value?: { alignContent?: Alignment })

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

参数：

参数名	参数类型	必填	参数描述
alignContent	Alignment	否	设置子组件在容器内的对齐方式。默认值：Alignment.Center

参数名

参数类型

必填

参数描述

alignContent

Alignment

否

设置子组件在容器内的对齐方式。

默认值：Alignment.Center

属性

除支持通用属性外，还支持以下属性：

参数名	参数类型	参数描述
alignContent	Alignment	设置所有子组件在容器内的对齐方式。默认值：Alignment.Center 从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性与通用属性align同时设置时，后设置的属性生效。

参数名

参数类型

参数描述

alignContent

Alignment

设置所有子组件在容器内的对齐方式。

默认值：Alignment.Center

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

说明：

该属性与通用属性align同时设置时，后设置的属性生效。

// xxx.ets
@Entry
@Component
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
    }.width('100%').height(150).margin({ top: 5 })
  }
}

滑块视图容器

Swiper

滑块视图容器，提供子组件滑动轮播显示的能力。

说明

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

子组件

可以包含子组件。

说明

子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。

Swiper子组件的visibility属性设置为None，Swiper的displayMode属性设置为SwiperDisplayMode.AutoLinear或displayCount属性设置为'auto'时，对应子组件在视窗内不占位，但不影响导航点个数。

Swiper子组件的visibility属性设置为None，或者visibility属性设置为Hidden时，对应子组件不显示，但依然会在视窗内占位。

接口

Swiper(controller?: SwiperController)

参数：

参数名	参数类型	必填	参数描述
controller	SwiperController	否	给组件绑定一个控制器，用来控制组件翻页。

属性

除支持通用属性外，还支持以下属性，不支持Menu控制。

名称	参数类型	描述
index	number	设置当前在容器中显示的子组件的索引值。默认值：0 说明：设置小于0或大于等于子组件数量时，按照默认值0处理。
autoPlay	boolean	子组件是否自动播放。默认值：false 说明： loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。
interval	number	使用自动播放时播放的时间间隔，单位为毫秒。默认值：3000
indicator	boolean	是否启用导航点指示器。默认值：true
loop	boolean	是否开启循环。设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。默认值：true
duration	number	子组件切换的动画时长，单位为毫秒。默认值：400
vertical	boolean	是否为纵向滑动。默认值：false
itemSpace	number \| string	设置子组件与子组件之间间隙。默认值：0 说明：不支持设置百分比。
displayMode	SwiperDisplayMode	主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。默认值：SwiperDisplayMode.Stretch
cachedCount8+	number	设置预加载子组件个数。默认值：1
disableSwipe8+	boolean	禁用组件滑动切换功能。默认值：false
curve8+	Curve \| string	设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考Curve枚举说明，也可以通过插值计算模块提供的接口创建自定义的插值曲线对象。默认值：Curve.Linear
indicatorStyle8+	{ left?: Length, top?: Length, right?: Length, bottom?: Length, size?: Length, mask?: boolean, color?: ResourceColor, selectedColor?: ResourceColor }	设置导航点样式： - left: 设置导航点距离Swiper组件左边的距离。 - top: 设置导航点距离Swiper组件顶部的距离。 - right: 设置导航点距离Swiper组件右边的距离。 - bottom: 设置导航点距离Swiper组件底部的距离。 - size: 设置导航点的直径。不支持设置百分比。默认值：6vp。 - mask: 设置是否显示导航点蒙层样式。 - color: 设置导航点的颜色。 - selectedColor: 设置选中的导航点的颜色。
displayCount8+	number\|string	设置一页内元素显示个数。默认值：1 说明：字符串类型仅支持设置为'auto'，显示效果同SwiperDisplayMode.AutoLinear。使用number类型且设置小于等于0时，按默认值1显示。使用number类型时，子组件按照主轴均分Swiper宽度（减去displayCount-1的itemSpace）的方式进行主轴拉伸（收缩）布局。
effectMode8+	EdgeEffect	滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。默认值：EdgeEffect.Spring 说明：控制器接口调用时不生效回弹。

SwiperDisplayMode枚举说明

名称	描述
Stretch	Swiper滑动一页的宽度为Swiper组件自身的宽度。
AutoLinear	Swiper滑动一页的宽度为子组件宽度中的最大值。

SwiperController

Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。

showNext

showNext(): void

翻至下一页。翻页带动效切换过程，时长通过duration指定。

showPrevious

showPrevious(): void

翻至上一页。翻页带动效切换过程，时长通过duration指定。

finishAnimation

finishAnimation(callback?: () => void): void

停止播放动画。

参数：

参数名	参数类型	必填项	参数描述
callback	() => void	否	动画结束的回调。

事件

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

名称	功能描述
onChange(event: (index: number) => void)	当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。 - index:当前显示元素的索引。说明： Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。
onAnimationStart9+(event: (index: number) => void)	切换动画开始时触发该回调。 - index:当前显示元素的索引。说明：参数为动画开始前的index值（不是最终结束动画的index值），多列Swiper时，index为最左侧组件的索引。
onAnimationEnd9+(event: (index: number) => void)	切换动画结束时触发该回调。 - index:当前显示元素的索引。说明：当Swiper切换动效结束时触发，包括动画过程中手势中断，通过SwiperController调用finishAnimation。参数为动画结束后的index值，多列Swiper时，index为最左侧组件的索引。

名称

功能描述

onChange(event: (index: number) => void)

当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。

- index:当前显示元素的索引。

说明：

Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。

onAnimationStart9+(event: (index: number) => void)

切换动画开始时触发该回调。

- index:当前显示元素的索引。

说明：

参数为动画开始前的index值（不是最终结束动画的index值），多列Swiper时，index为最左侧组件的索引。

onAnimationEnd9+(event: (index: number) => void)

切换动画结束时触发该回调。

- index:当前显示元素的索引。

说明：

当Swiper切换动效结束时触发，包括动画过程中手势中断，通过SwiperController调用finishAnimation。参数为动画结束后的index值，多列Swiper时，index为最左侧组件的索引。

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): any {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list = []
    for (var i = 1; i <= 10; i++) {
      list.push(i.toString());
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
        }, item => item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(true)
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        console.info(index.toString())
      })

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}