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⁹⁺	是	图片路径，图片格式为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%')
  }
}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.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.

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 })
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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%')
  }
}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.

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%')
  }
}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.

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

分类

卡片开发

三方库

标签

HarmonyOS API

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：基础组件

ImageAnimator

子组件

接口

属性

ImageFrameInfo对象说明

事件

示例

LoadingProgress

子组件

接口

属性

示例

Marquee

子组件

接口

属性

事件

示例

NavRouter

子组件

接口

事件

示例

目录

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