鸿蒙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页面。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Laravel 安装(笔记一)

目录 第一步、Laravel 一般使用 composer安装 第二步、使用composer安装项目 第三步、配置环境 第四步、访问域名,安装完成 Laravel 官网 l​​​​​​​Installation - Laravel 中文网 为 Web 工匠创造的 PHP 框架 第一步、Laravel 一般使用 composer安装 如…

13.求面积[有问题]

#include<stdio.h> #include<math.h> #include<bits/stdc.h> using namespace std;void fun(double a,b,c) {double p,c;p (abc)/2;c sqrt(p*(p-a)*(p-b)*(p-c));printf("面积是&#xff1a;%lf",c); }int main(){double a,b,c;scanf("%lf,%…

《golang设计模式》第三部分·行为型模式-06-备忘录模式(Memento)

文章目录 1. 概述1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概述 备忘录&#xff08;Memento&#xff09;用于在不破坏目标对象封装特性的基础上&#xff0c;将目标对象内部的状态存储到外部对象中&#xff0c;以备之后恢复状态时使用。 1.1 角色 Originato…

【洛谷 B2008】计算 (a+b)×c 的值 题解(顺序结构+四则运算)

计算 (ab)c 的值 题目描述 给定 3 3 3 个整数 a , b , c a,b,c a,b,c&#xff0c;计算表达式 ( a b ) c (ab) \times c (ab)c 的值。 输入格式 输入仅一行&#xff0c;包括三个整数 a , b , c a,b,c a,b,c&#xff0c;数与数之间以一个空格分开。 输出格式 输出一行…

如何访问linux上的web服务

1.获取服务运行端口 例如8080 2.如果时vmware 需要先配置转发端口和主机ip 主机ip需要未使用的 例如&#xff1a; 3.查看虚拟机防火墙设置 centos8 为例 &#xff1a; firewall-cmd --zonepublic --list-ports 查看放通端口 如果没有放通 firewall-cmd --zonepublic --add-p…

04 if进阶

elif 否则如果 如果条件没有满足 会继续进入“否则如果”里面判断 只要满足一个条件 条件判断立即终止 chinese 100 if chinese 100:print("我们去迪士尼玩")elif chinese > 90:print("我们去朱雀森林公园")else:print("回家写作业")if n…

GO MySQL数据库操作封装

Go 语言操作数据库, 数据库连接封装&#xff1a; package Test_dbimport ("database/sql""fmt"_ "github.com/go-sql-driver/mysql""log""sync" )var (DB *sql.DBpoolOnce sync.Once )func NewConnection() (*sql.…

微信小程序蓝牙连接 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…

游戏开发团队配置与协作流程

游戏开发技术图谱 - 知乎 游戏制作的流程是什么啊&#xff1f; - 知乎 系统策划&#xff1a;一张图梳理游戏系统的生产流程 - 知乎 游戏开发入门&#xff08;十一&#xff09;游戏引擎架构-CSDN博客

全局定制序列化

作用:将返回实体类中的属性如果为null 变成"" package com.example.micrweb.config;import com.fasterxml.jackson.core.JsonGenerator; import com.fasterxml.jackson.databind.JsonSerializer; import com.fasterxml.jackson.databind.ObjectMapper; import com.f…

linux驱动——原子操作

linux驱动——原子操作 原子操作 API Linux 内核定义了叫做 atomic_t 的结构体来完成整型数据的原操作&#xff0c;在使用是使用原子变量来代替整型变量。此结构体定义在 include/linux/types.h 文件中&#xff0c;定义如下&#xff1a; typedef struct {int counter; }atom…

websocket与node.js实现

什么是 websocket&#xff1f; websoket 是一种网络通信协议&#xff0c;基于 tcp 连接的全双工通信协议&#xff08;客户端和服务器可以同时收发信息&#xff09;&#xff0c;值得注意的是他不基于 http 协议&#xff0c;websocket 只有在建立连接的时候使用到 http 协议进行…

Kubernetes(k8s)之Pod详解

文章目录 Kubernetes之Pod详解一、Pod介绍pod结构pod定义 二、Pod配置pod基本配置镜像拉取策略启动命令环境变量端口设置资源配额 三、Pod生命周期创建和终止初始化容器钩子函数容器探测重启策略 四、Pod调度定向调度NodeNameNodeSelector 亲和性调度NodeAffinityPodAffinityPo…

风电场叶片运输车模型-FBX格式-带动画-数字孪生场景搭建

FBX格式的风电场中叶片运输车辆模型&#xff0c;按照真实尺寸建模&#xff0c;车辆多个部位带动画效果&#xff0c;适用于风电场三维数字化场景和风电场数字孪生使用&#xff0c;也可以用来作为各种三维平台的测试模型。 模型效果图 下载地址 叶片运输车模型下载地址

php生成xml数据

在PHP中&#xff0c;你可以使用以下几种方法生成XML数据&#xff1a; 使用DOM扩展&#xff1a; $xml new DOMDocument(1.0, UTF-8); $root $xml->createElement(root); $xml->appendChild($root); $child $xml->createElement(child); $root->appendChild($ch…

使用 Raspberry Pi、Golang 和 HERE XYZ 制作实时地图

到目前为止&#xff0c;您可能已经看过我的一些与 Raspberry Pi 和位置数据相关的教程。我是这些小型物联网 (IoT) 设备的忠实粉丝&#xff0c;并编写了有关使用 Golang 进行 WLAN 定位 和 使用 Node.js 进行 GPS 定位的教程。 我想继续沿着 Golang 路线&#xff0c;做一个关于…

目标检测YOLO实战应用案例100讲-基于YOLO的小目标检测改进算法

目录 前言 国内外研究现状 常规尺寸目标检测算法 小目标的检测算法

stm32定时器输入捕获模式

频率测量 频率测量有两种方法 测频法&#xff1a;在闸门时间T内&#xff0c;对上升沿或下降沿计次&#xff0c;得到N&#xff0c;则评率fxN/T测周法&#xff1a;两个上升沿内&#xff0c;以标准频率fc计次得到N&#xff0c;则频率fx fc/N中界频率&#xff1a;测频法和测周法误…

Spark的通用运行流程与Spark YARN Cluster 模式的运行流程

Spark的通用运行流程 集群启动后Worker节点会向Master节点心跳汇报资源Client向Driver提交APP&#xff0c;根据不同的运行模式在不同的地方创建Driver。Driver以粗粒度的方式向Master注册应用并申请资源&#xff08;在Application执行之前&#xff0c;将所有的资源申请完毕&…

助力企业前行——ScalaSpark最佳实践课程

时间飞逝&#xff0c;转眼间我们的Scala&Spark培训课程已经圆满结束&#xff01;在这段精彩的学习旅程中&#xff0c;你们展现了坚韧、决心和追求卓越的品质。 scala(Scalable Language)是一种多范式的编程语言&#xff0c;其设计的初衷是要集成面向对象编程和函数式编程的…