HarmonyOS页面跳转和页面间传值

IndexPage

在这里插入图片描述

  • 定义一个参数类
export class RouterParams {
  src:string
  constructor(str:string) {
    this.src = str
  }
}
  • 点击按钮后,将创建的RouterParams 对象传递到第二页
        Button($r('app.string.next'))
          .fontSize(16)
          .width(300)
          .height(50)
          .backgroundColor($r('app.color.button_bg'))
          .onClick(() => {
            router.pushUrl({
              url: 'pages/SecondPage',
              params: new RouterParams('Index页面传来的数据')
            }).catch((error:Error) => {
              Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error));
            });
          })

SecondPage

在这里插入图片描述


import { router } from '@kit.ArkUI';
import CommonConstants from '../common/constants/CommonConstants';
import { RouterParams } from './IndexPage';

@Entry
@Component
struct SecondPage {
  @State params: RouterParams = router.getParams() as RouterParams
  @State src: string = this.params.src;

  build() {
    Row() {
      Column() {
        Text('第二页')
          .fontSize(38)
          .fontWeight(FontWeight.Bold)

        Text(this.src)
          .fontSize(16)

        Blank()
        Button($r('app.string.back'))
          .fontSize(16)
          .width(300)
          .height(50)
          .backgroundColor($r('app.color.button_bg'))
          .onClick(() => {
            router.back();
          })
      }
      .width(CommonConstants.FULL_WIDTH)
      .height(CommonConstants.LAYOUT_HEIGHT)
    }
    .height(CommonConstants.FULL_HEIGHT)
    .backgroundColor($r('app.color.page_bg'))
  }
}

相关推荐

  1. [Flutter]页面

    2024-07-19 18:44:05       29 阅读
  2. [Android]Jetpack Compose页面

    2024-07-19 18:44:05       102 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-19 18:44:05       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-19 18:44:05       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-19 18:44:05       58 阅读
  4. Python语言-面向对象

    2024-07-19 18:44:05       69 阅读

热门阅读

  1. 面试问题:React基本概念,和所遇到的CPU和IO问题

    2024-07-19 18:44:05       19 阅读
  2. Linux处理文件sed

    2024-07-19 18:44:05       19 阅读
  3. Hadoop基础组件介绍!

    2024-07-19 18:44:05       18 阅读
  4. Android 14 适配之 - 全屏 intent 通知

    2024-07-19 18:44:05       19 阅读
  5. Vector容器笔记

    2024-07-19 18:44:05       19 阅读
  6. HashMap的putVal方法(源码分析)

    2024-07-19 18:44:05       24 阅读
  7. 周报 | 24.7.8-24.7.14文章汇总

    2024-07-19 18:44:05       23 阅读
  8. C语言习题~day35

    2024-07-19 18:44:05       24 阅读
  9. Python打包exe 以及压缩大小方法

    2024-07-19 18:44:05       21 阅读
  10. 【ELK】简述

    2024-07-19 18:44:05       20 阅读
  11. 架构以及架构中的组件

    2024-07-19 18:44:05       17 阅读
  12. MySQL物理备份-XtraBackup远程备份恢复

    2024-07-19 18:44:05       19 阅读