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

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

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

效果图:
HarmonyOS应用开发-eTS-Navigator组件练习-开源基础软件社区

标签
HarmonyOS应用开发-eTS-Navigator组件练习.docx 85.05K 3次下载
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐