HarmonyOS API:基础组件

joytrian
发布于 2023-3-23 17:36
浏览
0收藏

版本:v3.1 Beta

ImageAnimator

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


提供帧动画组件来实现逐帧播放图片的能力,可以配置需要播放的图片列表,每张图片可以配置时长。


说明

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

子组件

接口

ImageAnimator()

属性

参数名称

参数类型

参数描述

images

Array<ImageFrameInfo>

设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息,详见ImageFrameInfo属性说明。

默认值:[]

说明:

不支持动态更新。

state

​AnimationStatus​

默认为初始状态,用于控制播放状态。

默认值:AnimationStatus.Initial

duration

number

单位为毫秒,默认时长为1000ms;duration为0时,不播放图片;值的改变只会在下一次循环开始时生效;当images中任意一帧图片设置了单独的duration后,该属性设置无效。

默认值:1000

reverse

boolean

设置播放顺序。false表示从第1张图片播放到最后1张图片; true表示从最后1张图片播放到第1张图片。

默认值:false

fixedSize

boolean

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致,此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。

默认值:true

preDecode

number

是否启用预解码,默认值为0,即不启用预解码,如该值设为2,则播放当前页时会提前加载后面两张图片至缓存以提升性能。

默认值:0

fillMode

​FillMode​

设置动画开始前和结束后的状态,可选值参见FillMode说明。

默认值:FillMode.Forwards

iterations

number

默认播放一次,设置为-1时表示无限次播放。

默认值:1

ImageFrameInfo对象说明

参数名称

参数类型

必填

参数描述

src

string | ​​Resource​9+

图片路径,图片格式为svg,png和jpg,从API Version9开始支持​​Resource​​类型的路径。

width

number | string

图片宽度。

默认值:0

height

number | string

图片高度。

默认值:0

top

number | string

图片相对于组件左上角的纵向坐标。

默认值:0

left

number | string

图片相对于组件左上角的横向坐标。

默认值:0

duration

number

每一帧图片的播放时长,单位毫秒。

默认值:0

事件

名称

功能描述

onStart(event: () => void)

状态回调,动画开始播放时触发。

onPause(event: () => void)

状态回调,动画暂停播放时触发。

onRepeat(event: () => void)

状态回调,动画重复播放时触发。

onCancel(event: () => void)

状态回调,动画取消播放时触发。

onFinish(event: () => void)

状态回调,动画播放完成时触发。

示例

// xxx.ets
@Entry
@Component
struct ImageAnimatorExample {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1

  build() {
    Column({ space: 10 }) {
      ImageAnimator()
        .images([
          {
            src: $r('app.media.img1'),
            width: 340,
            height: 240,
          },
          {
            src: $r('app.media.img2'),
            width: 340,
            height: 240,
          },
          {
            src: $r('app.media.img3'),
            width: 340,
            height: 240,
          },
          {
            src: $r('app.media.img4'),
            width: 340,
            height: 240,
          }
        ])
        .duration(2000)
        .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2)
        .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
        .margin({ top: 100 })
        .onStart(() => {
          console.info('Start')
        })
        .onPause(() => {
          console.info('Pause')
        })
        .onRepeat(() => {
          console.info('Repeat')
        })
        .onCancel(() => {
          console.info('Cancel')
        })
        .onFinish(() => {
          console.info('Finish')
        })
      Row() {
        Button('start').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Running
        }).margin(5)
        Button('pause').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Paused     // 显示当前帧图片
        }).margin(5)
        Button('stop').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Stopped    // 显示动画的起始帧图片
        }).margin(5)
      }

      Row() {
        Button('reverse').width(100).padding(5).onClick(() => {
          this.reverse = !this.reverse
        }).margin(5)
        Button('once').width(100).padding(5).onClick(() => {
          this.iterations = 1
        }).margin(5)
        Button('infinite').width(100).padding(5).onClick(() => {
          this.iterations = -1 // 无限循环播放
        }).margin(5)
      }
    }.width('100%').height('100%')
  }
}

HarmonyOS API:基础组件-鸿蒙开发者社区

LoadingProgress

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


用于显示加载动效的组件。


说明

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

子组件

接口

LoadingProgress()


创建加载进展组件。

属性

名称

参数类型

描述

color

​ResourceColor​

设置加载进度条前景色。

示例

// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
  build() {
    Column({ space: 5 }) {
      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
      LoadingProgress()
        .color(Color.Blue)
    }.width('100%').margin({ top: 5 })
  }
}

HarmonyOS API:基础组件-鸿蒙开发者社区

Marquee

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


跑马灯组件,用于滚动展示一段单行文本,仅当文本内容宽度超过跑马灯组件宽度时滚动。


说明

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

子组件

接口

Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })


参数:


参数名

参数类型

必填

参数描述

start

boolean

控制跑马灯是否进入播放状态。

step

number

滚动动画文本滚动步长。

默认值:6,单位vp

loop

number

设置重复滚动的次数,小于等于零时无限循环。

默认值:-1

fromStart

boolean

设置文本从头开始滚动或反向滚动。

默认值:true

src

string

需要滚动的文本。

属性

名称

参数类型

描述

allowScale

boolean

是否允许文本缩放。

默认值:false

事件

名称

功能描述

onStart(event: () => void)

开始滚动时触发回调。

onBounce(event: () => void)

完成一次滚动时触发,若循环次数不为1,则该事件会多次触发。

onFinish(event: () => void)

滚动全部循环次数完成时触发回调。

示例

// xxx.ets
@Entry
@Component
struct MarqueeExample {
  @State start: boolean = false
  private fromStart: boolean = true
  private step: number = 50
  private loop: number = Infinity
  private src: string = "Running Marquee starts rolling"

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Marquee({
        start: this.start,
        step: this.step,
        loop: this.loop,
        fromStart: this.fromStart,
        src: this.src
      })
        .width(360)
        .height(80)
        .fontColor('#FFFFFF')
        .fontSize(48)
        .fontWeight(700)
        .backgroundColor('#182431')
        .margin({ bottom: 40 })
        .onStart(() => {
          console.info('Marquee animation complete onStart')
        })
        .onBounce(() => {
          console.info('Marquee animation complete onBounce')
        })
        .onFinish(() => {
          console.info('Marquee animation complete onFinish')
        })
      Button('Start')
        .onClick(() => {
          this.start = true
        })
        .width(120)
        .height(40)
        .fontSize(16)
        .fontWeight(500)
        .backgroundColor('#007DFF')
    }
    .width('100%')
    .height('100%')
  }
}

HarmonyOS API:基础组件-鸿蒙开发者社区

NavRouter

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


导航组件,默认提供点击响应处理,不需要开发者自定义点击事件逻辑。


说明

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

子组件

必须包含两个子组件,其中第二个子组件必须为​​NavDestination​​。

接口

NavRouter()

事件

名称

功能描述

onStateChange(callback: (isActivated: boolean) => void)

组件激活状态切换时触发该回调。返回值isActivated为true时表示激活,为false时表示未激活。

说明: 用户点击NavRouter,激活NavRouter,加载对应的NavDestination子组件时,回调onStateChange(true);NavRouter对应的NavDestination子组件不再显示时,回调onStateChange(false)。

示例

// xxx.ets
@Entry
@Component
struct NavRouterExample {
  private arr: number[] = [0, 1, 2, 3]
  @State isActive: boolean = false
  @State dex: number = 0

  build() {
    Column() {
      Navigation() {
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number, index: number) => {
            ListItem() {
              NavRouter() {
                Row() {
                  Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 })
                  Text(`NavRouter${item + 1}`)
                    .fontSize(22)
                    .fontWeight(500)
                    .textAlign(TextAlign.Center)
                }
                .width(180)
                .height(72)
                .backgroundColor(this.dex === index ? '#ccc' : '#fff')
                .borderRadius(24)

                NavDestination() {
                  Text(`我是NavDestination第${item + 1}页内容`).fontSize(50)
                  Flex({ direction: FlexDirection.Row }) {
                    Row() {
                      Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 })
                      Text('今天共有七节课').fontSize(30)
                    }.padding({ left: 15 })
                  }
                }.backgroundColor('#ccc')
                .title(`NavDestination${item + 1}`)
              }.onStateChange((isActivated: boolean) => {
                this.dex = index
              })
            }
          }, item => item)
        }
        .height('100%')
        .margin({ top: 12, left: 12 })
      }
      .mode(NavigationMode.Split)
      .hideTitleBar(true)
      .hideToolBar(true)
    }.height('100%')
  }
}

文章转载自:​​https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-navrouter-0000001478061693-V3?catalogVersion=V3​


收藏
回复
举报
回复
    相关推荐