HarmonyOS API:容器组件

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

版本:v3.1 Beta

Swiper

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


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


说明

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

子组件

可以包含子组件。

接口

Swiper(controller?: SwiperController)


参数:


参数名

参数类型

必填

参数描述

controller

​SwiperController​

给组件绑定一个控制器,用来控制组件翻页。

属性

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


名称

参数类型

描述

index

number

设置当前在容器中显示的子组件的索引值。

默认值:0

autoPlay

boolean

子组件是否自动播放,自动播放状态下,导航点不可操作。

默认值: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.Ease

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: 设置导航点的直径。

- mask: 设置是否显示导航点蒙层样式。

- color: 设置导航点的颜色。

- selectedColor: 设置选中的导航点的颜色。

displayCount8+

number|string

设置一页内元素显示个数。

默认值:1

effectMode8+

​EdgeEffect​

滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。

默认值:EdgeEffect.Spring

SwiperDisplayMode枚举说明

名称

描述

Stretch

Swiper滑动一页的宽度为Swiper组件自身的宽度。

AutoLinear

Swiper滑动一页的宽度为子组件宽度中的最大值。

SwiperController

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

showNext

showNext(): void

翻至下一页。

showPrevious

showPrevious(): void

翻至上一页。

finishAnimation

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

停止播放动画。

参数:

参数名

参数类型

必填项

参数描述

callback

() => void

动画结束的回调。

事件

onChange

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

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

说明

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

返回值:

名称

类型

参数描述

index

number

当前显示元素的索引。

示例

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

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

Tabs

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


通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。


说明

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

子组件

仅可包含子组件​​TabContent​​。

接口

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: ​​TabsController​​})


参数:


参数名

参数类型

必填

参数描述

barPosition

BarPosition

设置Tabs的页签位置。

默认值:BarPosition.Start

index

number

设置初始页签索引。

默认值:0

controller

​TabsController​

设置Tabs控制器。

BarPosition枚举说明

名称

描述

Start

vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。

End

vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。

属性

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


名称

参数类型

描述

vertical

boolean

设置为false是为横向Tabs,设置为true时为纵向Tabs。

默认值:false

scrollable

boolean

设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。

默认值:true

barMode

BarMode

TabBar布局模式,具体描述见BarMode枚举说明。

默认值:BarMode.Fixed

barWidth

number | Length8+

TabBar的宽度值。

barHeight

number | Length8+

TabBar的高度值。

animationDuration

number

TabContent滑动动画时长。不设置时,点击切换页签无动画,滑动切换有动画;设置时,点击切换和滑动切换都有动画。

默认值:200

BarMode枚举说明

名称

描述

Scrollable

每一个TabBar均使用实际布局宽度,超过总长度(横向Tabs的barWidth,纵向Tabs的barHeight)后可滑动。

Fixed

所有TabBar平均分配barWidth宽度(纵向时平均分配barHeight高度)。

事件

除支持​​通用事件​​外,还支持以下事件:


名称

功能描述

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

Tab页签切换后触发的事件。

TabsController

Tabs组件的控制器,用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

导入对象

controller: TabsController = new TabsController()

changeIndex

changeIndex(value: number): void

控制Tabs切换到指定页签。

参数:

参数名

参数类型

必填

参数描述

value

number

页签在Tabs里的索引值,索引值从0开始。

示例

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.TabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.TabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.TabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.TabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

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

TabContent

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


仅在Tabs中使用,对应一个切换页签的内容视图。


说明

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

子组件

支持单个子组件。

接口

TabContent()

属性

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


名称

参数类型

描述

tabBar

string | Resource | {

icon?: string | Resource,

text?: string | Resource

}

| ​​CustomBuilder​8+

设置TabBar上显示内容。

CustomBuilder: 构造器,内部可以传入组件(API8版本以上适用)。

说明:

> 如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。

说明

  • TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
  • TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。

示例

示例1:

// xxx.ets
@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text('Tab1')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(0))

        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(1))

        TabContent() {
          Column() {
            Text('Tab3')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(2))

        TabContent() {
          Column() {
            Text('Tab4')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(3))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(190)
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })
    }.width('100%')
  }
}

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

示例2:

// xxx.ets
@Entry
@Component
struct TabContentExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text('Tab')
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent()
          .tabBar(this.TabBuilder(0))
        TabContent()
          .tabBar(this.TabBuilder(1))
        TabContent()
          .tabBar(this.TabBuilder(2))
        TabContent()
          .tabBar(this.TabBuilder(3))
      }
      .vertical(true)
      .barWidth(96)
      .barHeight(414)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(96)
      .height(414)
      .backgroundColor('#F1F3F5')
      .margin({ top: 52 })
    }.width('100%')
  }
}

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

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

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