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

鸿蒙时代
发布于 2021-12-6 10:34
浏览
0收藏

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

选择

:::
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区
::: hljs-center

选择eTS语言

:::

创建完成后,这是该目录,其中common目录和model目录需要自行创建即可。
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区
::: hljs-center

目录

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

自定义组件的声明方式为:
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区

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

#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区
@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)
    }
  }
}

效果图:
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区

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

新建一个ets文件
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区
::: hljs-center

取文件名

:::
::: hljs-center

#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区

:::

::: 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%')
  }
}

效果图:
#星光计划2.0# ArkUI 声明式UI工程创建体验与页面跳转实现-鸿蒙开发者社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
ArkUI#星光计划2.0#声明式UI工程创建体验与.docx 346.57K 12次下载
已于2021-12-7 14:31:51修改
2
收藏
回复
举报
回复
    相关推荐