鸿蒙:实现两个Page页面跳转

效果展示

这篇博文在《鸿蒙:从0到"Hello Harmony"》基础上实现两个Page页面跳转

1.构建第一个页面

第一个页面就是**"Hello Harmony"**,把文件名和显示内容都改一下,改成"FirstPage",再添加一个"Next"按钮。

javascript 复制代码
@Entry
@Component
struct FristPage {
  @State message1: string = "FirstPage"
  @State message2: string = 'Next'

  build() {
    Row() {
      Column() {
        Text(this.message1)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height("10%")
          .margin({
            top: 0
          })

        Button(this.message2)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height('5%')
          .type(ButtonType.Capsule)
          .margin({
            top: 30
          })
          .backgroundColor("#0D9FFB")
          .width('50%')
          .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:

2.构建第二个页面

1.在"entry > src > main > ets > pages "目录下,新建SecondPage.ets

同样,实现一个文本和一个Button按钮

javascript 复制代码
@Entry
@Component
struct SecondPage {
  @State message1: string = 'SecondPage'
  @State message2: string = 'Back'

  build() {
    Row() {
      Column() {
        Text(this.message1)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)

        Button(this.message2)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height('5%')
          .type(ButtonType.Capsule)
          .margin({
            top: 30
          })
          .backgroundColor("#0D9FFB")
          .width('50%')
          .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

Previewer效果:

3.配置路由

配置第二个页面的路由。

在"Project "窗口,打开"entry > src > main > resources > base > profile",

main_pages.json 文件中的**"src"** 下配置第二个页面的路由**"pages/second"**。

代码如下:

javascript 复制代码
{
  "src": [
    "pages/FirstPage",
    "pages/SecondPage"
  ]
}

4.实现页面跳转

​页面间的导航可以通过页面路由router来实现。

页面路由router 根据页面url找到目标页面,从而实现跳转。

使用页面路由需要导入router模块。

(1).第一个页面跳转到第二个页面

在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。

"FirstPage.ets"文件的代码如下:

javascript 复制代码
// @ohos.router模块功能从API version 8开始支持,请使用对应匹配的SDK
import router from '@ohos.router';

@Entry
@Component
struct FristPage {
  @State message1: string = "FirstPage"
  @State message2: string = 'Next'

  build() {
    Row() {
      Column() {
        Text(this.message1)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height("10%")
          .margin({
            top: 0
          })

        Button(this.message2)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height('5%')
          .type(ButtonType.Capsule)
          .margin({
            top: 30
          })
          .backgroundColor("#0D9FFB")
          .width('50%')
          .height('5%')
          .onClick(() => {
            console.info(`Succeeded in clicking the 'Next' button.`)
            try {
              router.pushUrl({ url: 'pages/SecondPage' })
              console.info('Succeeded in jumping to the second page.')
            } catch (err) {
              console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

(1).第二个页面跳转到第一个页面

在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。

**"SecondPage.ets"**文件的示例如下:

javascript 复制代码
import router from '@ohos.router';

@Entry
@Component
struct SecondPage {
  @State message1: string = 'SecondPage'
  @State message2: string = 'Back'

  build() {
    Row() {
      Column() {
        Text(this.message1)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)

        Button(this.message2)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height('5%')
          .type(ButtonType.Capsule)
          .margin({
            top: 30
          })
          .backgroundColor("#0D9FFB")
          .width('50%')
          .height('5%')
          .onClick(() => {
            console.info(`Succeeded in clicking the 'Next' button.`)
            try {
              router.pushUrl({ url: 'pages/FirstPage' })
              console.info('Succeeded in jumping to the second page.')
            } catch (err) {
              console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
            }
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

5.实现效果

如开头展示

相关推荐
m0_685535081 小时前
汽车抬头显示(HUD)光学系统设计实例(含核心技巧解析)
华为·光学·光学设计·光学工程·镜头设计
晓oi10 小时前
基于华为设备的 OSPF+MSTP+DHCP+NAT 综合网络架构实现
网络·华为
ICT系统集成阿祥10 小时前
华为CloudEngine系列交换机堆叠如何配置,附视频
开发语言·华为·php
博睿谷IT99_10 小时前
华为 USG 防火墙 NAT 配置
网络·华为·acl·nat·nat 环路
猫林老师11 小时前
HarmonyOS语音交互与媒体会话开发实战
交互·harmonyos·媒体
白鹿第一帅12 小时前
【成长纪实】HarmonyOS 场景技术共建实践|轻备份技术在《社区之星》应用中的深度应用
harmonyos·白鹿第一帅·csdn成都站·鸿蒙开放能力·鸿蒙学习之路·harmonyos创新赛·轻备份技术
繁依Fanyi14 小时前
【参赛心得】我的 HarmonyOS 开发入门与参赛之路
ide·人工智能·华为·word·harmonyos·aiide·codebuddyide
小白学鸿蒙16 小时前
鸿蒙数据库表中的数据如何导出为Excel存到系统下载目录
数据库·excel·harmonyos
爱笑的眼睛1116 小时前
HarmonyOS WindowExtension深度解析:构建跨窗口交互的创新体验
华为·harmonyos