HarmonyOS带大家创建自己的第一个Page页面并实现路由跳转

我们 在开发过程中 经常会看到 被 艾特修饰的代码
有限像 java中的注解
在这里插入图片描述
在 harmonyOS 中 这叫 装饰器
被关键字装饰取来的代码 会具备某某功能

我们这里先来创建一个新的界面
在pages 目录下 右键 如下图 选择page创建
在这里插入图片描述
这里 我们取名叫 AppView 然后点击右下角 Finish
在这里插入图片描述
这样 我们界面就创建出来了
在这里插入图片描述
然后 这里 我们需要强调 被 @State 修饰的数据 一旦发生改变 整个页面都会重新渲染

然后 我们编写这个 AppView 代码如下

@Entry
@Component
struct AppView {build() {Column(){Text("成就自我 成就世界").fontSize(30)Button("点击我跳转").width("60%").height("50vp")}.width('100%').height('100%')}
}

这里 我们编写了 Column一整块 宽高 都是界面的 100%
然后 里面用了一个 Text 组件 文件组件 里面的内容设置为 成就自我 成就世界
字体大小设置为 30vp
然后 写了一个Button 按钮组件
里面的文本是 点击我跳转
宽度 界面的 百分之 六十
高度 50vp
所有大小单位 你如果直接写数值 或者 不写明单位 它用的就是 vp

我们预览器 大体就是这样一个效果
在这里插入图片描述
那么 如果我们想实现界面跳转 首先要了解一个路由的概念

如下图指向路径 我们所有创建的界面文件 他都会在这里有一个配置
在这里插入图片描述
例如 我们要去index页面 直接复制过来
在这里插入图片描述
然后 我们将 AppView 代码编写如下

import router from '@ohos.router'
@Entry
@Component
struct AppView {build() {Column(){Text("成就自我 成就世界").fontSize(30)Button("点击我跳转").width("60%").height("50vp").onClick(()=>{//跳转界面router.pushUrl({url:"pages/Index"})})}.width('100%').height('100%')}
}

这里 我们导入了 router路由管理 利用里面的pushUrl函数 指定跳转向pages/Index

我们运行代码 然后点击按钮
在这里插入图片描述
可以看到 这个跳转也是没毛病
在这里插入图片描述
然后 我们第一个界面 写一个返回的逻辑
在这里插入图片描述
第一个界面 我们给文本加个点击事件 然后 里面引入 router
调用下面的 back函数 返回上一个路由
我们点击文本 他就会返回我们第一个界面
在这里插入图片描述
如果 你想整个界面 随便点击一处 就触发事件 那就谁在最外面 给谁设置就好了
在这里插入图片描述

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

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

相关文章

P1006 [NOIP2008 提高组] 传纸条

洛谷的题 网址:P1006 [NOIP2008 提高组] 传纸条 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 还是动态规划,这题和我上一篇博客写的题差不多 区别在于,这个地图不再是方阵,路线不能交叉,而且地图的大小可能大得多…

IDEA中,光标移动快捷键(Shift + 滚轮前后滚动:当前文件的横向滚动轴滚动。)

除此之外,其他常用的光标移动快捷键包括: Shift 滚轮前后滚动:当前文件的横向滚动轴滚动。Shiftenter:快速将鼠标移动到下一行。Ctrl ]:移动光标到当前所在代码的花括号结束位置。Ctrl 左方向键:光标跳转…

内衣迷你洗衣机什么牌子好?好用不贵的内衣洗衣机推荐

由于内衣洗衣机在目前的市场上越来越受欢迎,使得不少的小伙伴都在犹豫要不要为自己入手一台专用的内衣洗衣机,专门来清洗一些内衣裤等等贴身衣物,这个问题的答案是很有必要的,因为目前市场上的家用大型洗衣机对衣物只能够起到清洁…

SpringBoot_02

Web后端开发_07 SpringBoot_02 SpringBoot原理 1.配置优先级 1.1配置 SpringBoot中支持三种格式的配置文件: application.propertiesapplication.ymlapplication.yaml properties、yaml、yml三种配置文件,优先级最高的是properties 配置文件优先级…

前端又出新轮子Nue.js,但还是低代码更香!

前言 别TM卷了!!! 自从前后端分离以来,前端前端的车轮滚滚向前,轮子造的越来越圆。每个人都在适应这个轮子的节奏,稍微不注意就会被甩出车轮之外。 调侃归调侃,既然口子已经开了,…

一键抠图2:C/C++实现人像抠图 (Portrait Matting)

一键抠图2:C/C实现人像抠图 (Portrait Matting) 目录 一键抠图2:C/C实现人像抠图 (Portrait Matting) 1. 前言 2. 抠图算法 3. 人像抠图算法MODNet (1)模型训练 (2)将Pytorch模型转换ONNX模型 &…

作业12.5

1.定义一个基类 Animal&#xff0c;其中有一个虛函数perform&#xff08;)&#xff0c;用于在子类中实现不同的表演行为。 #include <iostream>using namespace std; class Animal { private:int weight; public:Animal(){}Animal(int weight):weight(weight){}virtual …

全网最新最牛的Appium自动化:Appium常用操作之TouchAction操作

TouchAction操作 Appium的辅助类&#xff0c;主要针对手势操作&#xff0c;比如滑动、长按、拖动等。其原理是将一系列的动作放在一个链条中&#xff0c;然后将该链条传递给服务器。服务器接受到该链条后&#xff0c;解析各个动作&#xff0c;逐个执行。 TouchAction类支持的动…

如何销售汽车之 汽车销售技巧和话术

如何销售汽车之 汽车销售技巧和话术 当前&#xff0c;汽车销售市场的竞争日益激烈&#xff0c;消费者对汽车的需求和要求也越来越高。但是市场竞争车型也非常多&#xff0c;如何更好的做好销售业绩突破&#xff0c;提高汽车销量&#xff0c;创造汽车销售佳绩&#xff0c;就需要…

什么是网络爬虫?有什么用?怎么爬?

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 【导读】 网络爬虫也叫做网络机器人&#xff0c;可以代替人们自动地在互联网中进行数据信息的采集与整理。 在大数据时代&#xff0c;信息的采集是一项重要的工作&#xff0c;如果单纯靠人力进行信息采集&#xff0c;不仅低…

k8s 安装部署

一&#xff0c;准备3台机器&#xff0c;安装docker&#xff0c;kubelet、kubeadm、kubectl firewall-cmd --state 使用下面命令改hostname的值&#xff1a;(改为k8s-master01)另外两台改为相应的名字。 172.188.32.43 hostnamectl set-hostname k8s-master01 172.188.32.4…

Matlab 生成license

参考下面两个帖子 https://ww2.mathworks.cn/matlabcentral/answers/389888-matlab https://www.mathworks.com/matlabcentral/answers/131749-id-id-id-id 登陆 https://ww2.mathworks.cn/licensecenter 针对R2020b版本,点击下面红框生成 ip addr | grep ether看第一行 根据…

Geodesic in Heat: 一种测地线计算方法

在之前的博客中&#xff0c;我已经介绍过了使用Fast Marching算法计算测地线。Fast Marching的好处是实现简单&#xff0c;方便扩展在点云上。但是缺点是精度不够&#xff0c;求解不平滑。早在2013年&#xff0c;Crane et al. [1]就已经提出利用热流来估算测地距离。我很早就知…

Hadoop学习笔记(HDP)-Part.14 安装YARN+MR

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

一文7个步骤教你搭建测试web测试项目实战环境,

​今天小编&#xff0c;给大家总结下web 测试实战的相关内容&#xff0c;一起来学习下吧&#xff01; web项目实战可按顺序依次为&#xff1a;【搭建测试环境】、【需求评审】、【编写测试计划】、【分析测试点.编写测试用例】、【用例评审】、【执行用例提bug】、【测试报告】…

编写并调试运行一个简单的 Java 应用程序,显示自己的学号、姓名、兴趣爱好等。

源代码&#xff1a; public class Main { public static void main(String[] args) { System.out.println("学号是:""0233217821"); System.out.println("姓名是:""赵港"); System.out.println("兴趣爱好是:""运动&qu…

想要精确搜索商品详情?闲鱼电商API接口帮你实现!

闲鱼电商API接口是一种为开发者提供的强大工具&#xff0c;它能够帮助开发者轻松获取闲鱼平台上的商品信息&#xff0c;实现精确搜索商品详情功能。无论你是想要开发一个自有电商平台&#xff0c;还是需要定制商品搜索功能&#xff0c;闲鱼电商API接口都能够满足你的需求。 API…

C++检测字符串中有效的括号个数

匹配一个字符串buf中&#xff0c;连续包换运算符reg的次数&#xff1a; #include <iostream>//return 返回匹配的字符个数 //buf, 要检测的字符串 //reg, 包含的连续运算符 int GetMatchCount(std::string& buf, std::string& reg) {int nMatchCount 0;if (reg.…

提高Idea编码速度和插件自用推荐

非常推荐 Easy Javadoc 一款注释生成器&#xff0c;很好使~免费&#xff0c;配合使用腾讯、百度之类的翻译免费额度完全够用了&#xff0c;印象中是50万字符每月。下图是使用快捷键生成的注释&#xff08;我采用鼠标侧面按键&#xff0c;随手一按很方便&#xff09; Chinese …

制作一个RISC-V的操作系统四-嵌入式开发介绍

文章目录 什么是嵌入式开发交叉编译查看一些GCC文件夹 调试器GDB相关语法命令 模拟器QEMUQEMU的安装和使用项目构造工具MakeMakeFile的构成make的运行 练习4-1联系4-2练习4-3 什么是嵌入式开发 程序跑到开发板上&#xff0c;或者说运行到硬件上 交叉编译 简单理解交叉编译来说…