鸿蒙4.0开发笔记之DevEco Studio页面操作router的pushUrl页面跳转与back返回上一页(五)

一、认识组件

关于HarmonyOS中ArkTS的基础组件请参见文章鸿蒙4.0开发笔记之ArkTs语言基础与基本组件结构(四)

二、实现页面跳转pushUrl

1、操作说明

实现页面跳转的核心便是router.pushUrl的调用,操作起来也很简单,总共就四步。实现步骤如下:
(1)在项目列表的page目录下创建一个新的页面
2.1.1
(2)创建button,并设定基本属性方法
2.1.2
(3)给button添加onclick事件方法
(4)在事件方法中调用router.pushUrl()事件方法,并设定需要跳转的页面的路径。

.onClick(()=>{
          //执行跳转到Target页面:使用router路由可以指定跳转到某个url页面
          router.pushUrl({
            //在entry>src>main>resources>base>profile>main_pages.json中可以找到整个项目所有的页面
            url:"pages/Target"
          })
        })

注意:可以在项目路径下的entry>src>main>resources>base>profile>main_pages.json中找到整个项目所有的页面。

2、实现代码
import router from '@ohos.router'
@Entry
@Component
struct Arrow {
  @State message: string = '鸿蒙Next'

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button('点我跳转')
        .fontSize(30)
        .width('50%')
        .height('50vp')
        //跳转页面动作
        .onClick(()=>{
          //执行跳转到Target页面:使用router路由可以指定跳转到某个url页面
          router.pushUrl({
            //在entry>src>main>resources>base>profile>main_pages.json中可以找到整个项目所有的页面
            url:"pages/Target"
          })
        })
    }

    //设置Column容器的宽、高
    .width('100%')
    .height('100%')
  }
}

最终的实现效果就是,点击页面上的“点我跳转”按钮,就会成功跳转到“Target”页面。

三、返回上一个页面back

当页面跳转到“Target”页面后,如何在该页面返回到上一个页面呢?
其实只需要调用一个router.back()事件方法就OK了。实现代码如下:

import router from '@ohos.router'
@Entry
@Component
struct Target {
  @State message: string = '无际鹰'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontStyle(FontStyle.Italic)
          .backgroundColor(Color.Blue)
          .fontColor(Color.Orange)
          .onClick(()=>{
            //返回上一个页面,及从哪里跳转来的,就回到哪里去
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

这样的整体效果就是,在Arrow页面上点击页面上的“点我跳转”按钮,就会成功跳转到Target页面;然后在Target页面点击“无际鹰”就会跳转回Arrow页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/178629.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微机原理_1

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案,请将选定的答案填涂在答题纸的相应位置上。) 1,下列8086CPU标志寄存器的标志位中,不属于状态标志位的是() A. OF B. IF C. AF D. PF 8086微处理器可寻址访问的最大…

Ps:裁剪工具 - 裁剪预设的应用

裁剪工具提供了两种类型的裁剪方式。 一种是仅按宽高比(比例)进行裁剪,常在对图像进行二次构图时采用。 另一种则按指定的图像尺寸(宽度值和高度值)及分辨率(宽 x 高 x 分辨率)进行裁剪。其实质…

Sentinel 监控数据持久化(mysql)

Sentinel 实时监控仅存储 5 分钟以内的数据,如果需要持久化,需要通过调用实时监控接口来定制,即自行扩展实现 MetricsRepository 接口(修改 控制台源码)。 本文通过使用Mysql持久化监控数据。 1.构建存储表&#xff08…

leetcode:520. 检测大写字母

一、题目: 链接:520. 检测大写字母 - 力扣(LeetCode) 函数原型:bool detectCapitalUse(char* word) 二、思路: 本题较为简单,分为三种情况: 1.首字母大写,其余小写 2.首字…

Github Copilot AI编码完成工具

目录 一、GitHub Copilot 1、简介 2、工作原理 3、功能 二、GitHub Copilot X 1、什么是 GitHub Copilot X 2、GitHub Copilot X 的功能 三、支持、使用 1、支持 2、使用 四、实际研究、验证(代码方向) 1、代码生成 2、代码提示 3、生成测试用例 4、代码解释 5…

【Axure高保真原型】树形表格

今天和大家分享树形表格的原型模板,点击树的箭头可以打开或者收起子节点,点击表格内容,可以选中该行内容实现高亮变色效果,树形表格是通过中继器制作的,使用简单,只需要按要求填写中继器表格即可&#xff0…

深度学习常见激活函数:ReLU,sigmoid,Tanh,softmax,Leaky ReLU,PReLU,ELU整理集合,应用场景选择

文章目录 1、ReLU 函数(隐藏层中是一个常用的默认选择)1.1 优点1.2 缺点 2、sigmoid 函数2.1 优点2.2 缺点 3、Tanh 函数3.1 优点3.2 缺点 4、softmax 函数(多分类任务最后一层都会使用)5、Leaky ReLU 函数5.1 优点5.2 缺点 6、PR…

2023.11.22 -数据仓库的概念和发展

目录 https://blog.csdn.net/m0_49956154/article/details/134320307?spm1001.2014.3001.5501 1经典传统数仓架构 2离线大数据数仓架构 3数据仓库三层 数据运营层,源数据层(ODS)(Operational Data Store) 数据仓库层&#…

【深度学习】不用Conda在PP飞桨Al Studio三个步骤安装永久PyTorch环境

在 PaddlePaddle AI Studio 中使用 Python 虚拟环境安装 PyTorch 免责声明 在阅读和实践本文提供的内容之前,请注意以下免责声明: 侵权问题: 本文提供的信息仅供学习参考,不用做任何商业用途,如造成侵权,请私信我&am…

基于SSM的济南旅游网站设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:Vue 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目:是 目录…

数字逻辑电路基础-时序逻辑电路之锁存器

文章目录 一、锁存器简介二、verilog源码三、综合及仿真结果 一、锁存器简介 本文介绍数字逻辑电路中一种常用的基础时序逻辑电路-锁存,顾名思义,它的功能就是将输入在控制信号有效时透明传输到输出端,当控制信号无效时,输出值保…

微信小程序蓝牙连接 uniApp蓝牙连接设备

蓝牙列表期待效果 代码 <template><view class"bluetooth-list"><view class"align-items option" style"justify-content: space-between;" v-for"item in bluetoothList" :key"item.deviceId"><vie…

万字解析设计模式之组合模式、亨元模式

一、组合模式 1.1概述 组合模式是一种结构型设计模式&#xff0c;它允许将对象组合成树形结构&#xff0c;以表示“部分-整体”的层次结构。组合模式使得客户端可以一致地对待单个对象和对象组合&#xff0c;从而将复杂的层次结构展现为一个统一的树形结构。 在组合模式中&…

Audition 2024 24.0.0.46(音频剪辑)

Audition 2024是一款非常棒的音频编辑和混合软件&#xff0c;提供了广泛的工具和功能&#xff0c;用于创建、编辑、混合和设计音效。这款软件旨在加速音频和视频制作工作流程&#xff0c;提供具有原始音效的高质量混音。其界面构成清晰&#xff0c;操作简便&#xff0c;适合专业…

【python】python旅游网数据抓取分析(源码+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

开发上门送桶装水小程序要考虑哪些业务场景

上门送水业务已经有很长一段时间了&#xff0c;但是最开始都是给用户发名片、贴小广告&#xff0c;然后客户电话订水&#xff0c;水站工作人员再上门去送&#xff0c;这种人工记单和派单效率并不高&#xff0c;并且电话沟通中也比较容易出现偏差&#xff0c;那么根据这个情况就…

【Docker】从零开始:6.配置镜像加速器

【Docker】从零开始&#xff1a;5.配置镜像加速器 什么是镜像加速器&#xff1f;为什么要配置docker镜像加速器?常见的Docker镜像加速器有哪些&#xff1f;如何申请Docker镜像加速器如何配置Docker镜像加速器 什么是镜像加速器&#xff1f; 镜像加速器是一个位于Docker Hub之…

UDP中connect的作用

udpclientNoConnect.c里边的内容如下&#xff1a; #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<arpa/inet.h> #include<sys/socket.h> #include <errno.h> #include <syslog.h…

七、通过libfdk_aac编解码器实现aac音频和pcm的编解码

前言 测试环境&#xff1a; ffmpeg的4.3.2自行编译版本windows环境qt5.12 AAC编码是MP3格式的后继产品&#xff0c;通常在相同的比特率下可以获得比MP3更高的声音质量&#xff0c;是iPhone、iPod、iPad、iTunes的标准音频格式。 AAC相较于MP3的改进包含&#xff1a; 更多的采…

在AWS VPC中运行Nagios检查时指定自定义DNS解析器的选项

在AWS VPC中运行Nagios检查&#xff0c;并希望能够指定自定义DNS解析器来处理请求。我想使用Python requests库来实现这个目标。 根据问题描述&#xff0c;您想在AWS VPC中运行Nagios检查&#xff0c;并希望使用Python的requests库来指定自定义DNS解析器。 要解决这个问题&…