HarmonyOS应用开发-eTS-Navigator组件练习

鸿蒙时代

发布于 2021-12-21 09:31

浏览

0收藏

说明：
路由容器组件，提供路由跳转能力。
接口:
Navigator(value?: {target: string, type?: NavigationType})
接口参数：
HarmonyOS应用开发-eTS-Navigator组件练习-鸿蒙开发者社区

属性：
HarmonyOS应用开发-eTS-Navigator组件练习-鸿蒙开发者社区

案例：
创建新的ets
HarmonyOS应用开发-eTS-Navigator组件练习-鸿蒙开发者社区

代码示例：
index.ets：

@Component
struct Index {
  @State active: boolean = false
  @State Text: string = 'next'

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/next', type: NavigationType.Push }) {
        Text('进入 ' + this.Text + ' .ets').width('100%').textAlign(TextAlign.Center).fontSize(36)
      }.params({ text: this.Text })

      Navigator() {
        Text('返回').width('100%').textAlign(TextAlign.Center).fontSize(36)
      }.active(this.active)
      .onClick(() => {
        this.active = true
      })
    }.height(250).width(350).padding(35)
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

next.ets:

import router from '@system.router'
@Entry
@Component
struct Netx {
  @State text: string = router.getParams().text

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/back', type: NavigationType.Push }) {
        Text('进入back.ets').width('100%').height(80).fontSize(36)
      }

      Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center).fontSize(36)
    }
    .width('100%').height(400).padding({ left: 35, right: 35, top: 35 })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

back.ets：

Entry
@Component
struct Back {
  build() {
    Column() {
      Navigator({ target: 'pages/index', type: NavigationType.Back }) {
        Text('返回index').width('100%').textAlign(TextAlign.Center).fontSize(36)
      }
    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

效果图：
HarmonyOS应用开发-eTS-Navigator组件练习-鸿蒙开发者社区