我们 在开发过程中 经常会看到 被 艾特修饰的代码 有点像 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函数 返回上一个路由 我们点击文本 他就会返回我们第一个界面 如果 你想整个界面 随便点击一处 就触发事件 那就谁在最外面 给谁设置就好了

推荐链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。