HarmonyOS带大家创建自己的第一个Page页面并实现路由跳转(ArkTS)_harmony os 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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里 我们编写了 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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

我们运行代码 然后点击按钮

可以看到 这个跳转也是没毛病

然后 我们第一个界面 写一个返回的逻辑

第一个界面 我们给文本加个点击事件 然后 里面引入 router
调用下面的 back函数 返回上一个路由
我们点击文本 他就会返回我们第一个界面

如果 你想整个界面 随便点击一处 就触发事件 那就谁在最外面 给谁设置就好了