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函数返回上一个路由
我们点击文本他就会返回我们第一个界面
在这里插入图片描述
如果你想整个界面随便点击一处就触发事件那就谁在最外面给谁设置就好了