#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现 原创 精华

本文正在参与51CTOHarmonyOS技术社区创作者激励计划-星光计划2.0
ArkUI的学习体验与创作，我们来了。本文进行了基本的工程创建，页面布局包括图文形式及页面之间的跳转与返回，进行了详细的体验和分享。
一、声明式UI工程体验
1.创建工程
说明：声明式UI工程目前仅在API7才能使用

::: hljs-center

选择

:::

::: hljs-center

选择eTS语言

:::

创建完成后，这是该目录，其中common目录和model目录需要自行创建即可。

::: hljs-center

目录

:::
2.组件和装饰器@Component
在自定义组件之前，需要先了解什么是组件和装饰器，并进行初始化组件。然后通过修改组件属性和构造参数，实现一个自定义组件。
在声明式UI中，所有的页面都是由组件构成。组件的数据结构为struct，装饰器@Component是组件化的标志。用@Component修饰的struct表示这个结构体有了组件化的能力。

自定义组件的声明方式为：

在IDE创建工程模板中，MyComponent就是一个可以居中显示文字的自定义组件。开发者可以在Component的build方法里描述自己的UI结构，但需要遵循Builder的接口约束。

@Entry修饰的Component表示该Component是页面的总入口，也可以理解为页面的根节点。值得注意的是，一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。

@Component和@Entry都是基础且十分重要的装饰器。简单地理解，装饰器就是某一种修饰，给被装饰的对象赋予某一种能力，比如@Entry就是页面入口的能力，@Component就是组件化能力。
3.创建简单视图
图片资源自行查找，放置在自行创建的common目录下
Index.ets代码部分：

@Entry
@Component
struct Index {
  build() {
    Flex({direction:FlexDirection.Column,alignItems:FlexAlign.Center,justifyContent: FlexAlign.Center}){
      Image("/common/2.jpg")
        .objectFit(ImageFit.Contain)
        .height(300)
      Text('这是一个绿色苹果')
        .fontSize(26)
        .fontWeight(500)
    }
  }
}

效果图：

二、声明式UI工程-页面跳转
页面跳转
声明式UI范式提供了两种机制来实现页面间的跳转：
1.路由容器组件Navigator，包装了页面路由的能力，指定页面target后，使其包裹的子组件都具有路由能力。
2.路由RouterAPI接口，通过在页面上引入router，可以调用router的各种接口，从而实现页面路由的各种操作。
案例

新建一个ets文件


::: hljs-center

取文件名

:::
::: hljs-center

:::

::: hljs-center

新建成功

:::
代码展示：
index.ets代码部分：

import router from '@system.router';

@Entry
@Component
struct Index {
  build() {
    Flex({direction:FlexDirection.Column,alignItems:FlexAlign.Center,justifyContent: FlexAlign.Center}){
      Image("/common/2.jpg")
        .objectFit(ImageFit.Contain)
        .height(300)
      Text('这是一个绿色苹果')
        .fontSize(26)
        .fontWeight(500)
      Button('跳转至下一页')
        .onClick(() => {
          router.push({ uri: 'pages/apple' })
        })
    }
  }
}

apple.ets代码部分：

@Entry
@Component
struct Apple {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Image('/common/1.jpg')
        .objectFit(ImageFit.Contain)
        .height(300)
      Text('这是一个红苹果')
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

以上内容为蛟龙腾飞参照官方文档，进行的体验学习分享内容，与大家一起共同进步成长。