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,一经查实,立即删除!

相关文章

Scala--2

package scala02object Scala07_typeCast {def main(args: Array[String]): Unit {// TODO 隐式转换// 自动转换val b: Byte 10var i: Int b 10val l: Long b 10 100Lval fl: Float b 10 100L 10.5fval d: Double b 10 100L 10.5f 20.00println(d.getClass…

P1006 [NOIP2008 提高组] 传纸条

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

2023年甘肃省职业院校技能大赛(中职教师组)网络安全竞赛样题(二)

2023年甘肃省职业院校技能大赛(中职教师组) 网络安全竞赛样题(二) (总分1000分) 目录 模块A 基础设施设置与安全加固 A-1任务一 登录安全加固(Windows,Linux) A-2任…

如何通过Java的iTextPDF库制作一个PDF表格模板并填充数据

要使用Java的iTextPDF库制作一个PDF表格模板并填充数据&#xff0c;你需要遵循以下步骤&#xff1a; 添加依赖&#xff1a;首先&#xff0c;确保你的项目中包含了iTextPDF库的依赖。如果你使用Maven&#xff0c;可以在你的pom.xml文件中添加以下依赖&#xff1a; <depende…

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

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

Linux内核同步与互斥机制介绍

在内核中&#xff0c;可能出现多个进程&#xff08;通过系统调用进入内核模式&#xff09;访问同一个对象、进程和硬中断访问同一个对象、进程和软中断访问同一个对象、多个处理器访问同一个对象等现象&#xff0c;我们需要使用互斥技术&#xff0c;确保在给定的时刻只有一个主…

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

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

SpringBoot_02

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

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

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

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

一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 目录 一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 1. 前言 2. 抠图算法 3. 人像抠图算法MODNet &#xff08;1&#xff09;模型训练 &#xff08;2&#xff09;将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 …

LightDB to_char 三入参函数支持

文章目录 背景函数示例 背景 在信创适配中&#xff0c;从Oracle迁移过来的程序使用了TO_CHAR函数。 LightDB-X 23.3版本已经支持了两个入参的TO_CHAR函数&#xff0c;并不支持三个入参的TO_CHAR函数。LightDB-X 23.4版本对三个入参的TO_CHAR函数进行了支持。 函数示例 准备…

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

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

laravel 自定义密码验证方式

继承 EloquentUserProvider <?phpnamespace App\Providers;use Illuminate\Auth\EloquentUserProvider; use Illuminate\Contracts\Auth\ Authenticatable as UserContract;class ApiEloquentUserProvider extends EloquentUserProvider {public function validateCredent…

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

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

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

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

线程池,及7大参数,4大拒绝策略

1. 线程池的基本概念 线程池由以下几个主要组件构成&#xff1a; 任务队列&#xff08;Task Queue&#xff09;&#xff1a; 用于存储等待执行的任务。工作线程池&#xff1a; 用于执行任务的线程集合。线程工厂&#xff08;Thread Factory&#xff09;&#xff1a; 用于创建…

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]就已经提出利用热流来估算测地距离。我很早就知…