鸿蒙开发入门——声明式UI开发入门简介（1）

声明式UI特点

与常规命令式开发的区别在于主导者不同，命令式开发为开发者告诉计算机需要做什么，而声明式开发为开发者告诉计算机自己想要什么结果，怎么做交给预先的程序和算法，让计算机自行推断

1. 声明式描述
   开发者只需描述在界⾯在不同状态下要呈现的最终效果，⽽⽆需关注界⾯变化的具体过程
2. 状态驱动视图更新
   在声明式UI中，可以通过定义状态变量的方式使得开发者只需修改状态变量的值，界⾯就会⾃动更新

---

组件

在鸿蒙开发中，官方的ArkUI提供了很多组件供使用，大体分为两类：

1. 基础组件
   • Button组件
   • Text组件
   • Image组件
   • …
2. 容器组件
   • Row组件
   • Column组件
   • List组件
   • Grid组件
   • Swiper组件

基础组件提供了界面的呈现的基本元素，而容器组件顾名思义则是容纳基础组件的组件，用于对基础组件进行布局排版
关于自定义组件
自定义组件即是用装饰器@Component进行描述的struct结构体，其可以被其他组件复用

装饰器

装饰器主要用于装饰类、结构、方法以及变量，并赋予其特殊的含义。前期大体会接触到以下组件：

1. @Entry：表示该自定义组件为入口组件
2. @Component：表示自定义组件
3. @State：表示组件中的状态变量，状态变量变化会触发UI刷新

---

开发思路

我们整体的思路就一点：先排版，再放内容。即将想要的界面UI先布局好了，再往布局的组件中填充内容

build函数

• 该函数与@Component装饰器同时出现，在build函数中构建想要的组件
• build函数中有且只能有一个子组件（所以更多时候我们会进行自定义组件的设计）

struct关键字

• 在自定义组件时则用该关键字定义组件
• 未进行自定义组件其内部的定义就是页面，一般与ets文件（页面）名相同

关于布局——行组件和列组件居中

首先我们要知道主轴和交叉轴的概念：

• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向

其次我们要知道在行组件中，内里的元素是默认在交叉轴方向是居中的，列组件也是。即行组件内的元素在垂直方向上居中，而列组件内的元素在水平方向居中，所以

• 组件宽度百分百时，交叉轴方向居中.width('100%')，因为默认不给宽度时，编译器会自动给宽度，此时宽度是不占整个显示界面的宽度的，当给了整个宽度占比后，则会在交叉轴方向水平居中

• 主轴方向居中需要：.height('100%') .justifyContent(FlexAlign.Center)
  Column组件默认都是从上往下排列的，所以仅在主轴方向给满高度是无法使其居中的，要手动设置内里的元素的对齐方式才可居中
  justify Content：对齐内容。其会将设置了该属性的容器内的元素按所给方式对齐

  Row组件居中原理与Column相同，对应设计即可

关于组件

组件的整体构成如下：（以button为例）

• 子组件：不是所有组件都有子组件——看文档
• 组件参数：具体参数看官方文档
• 属性方法和事件方法记住常用的一些即可，其它的可查阅官方文档

自定义组件

使用struct添加一个结构体，并用@component装饰器修饰即可，在结构体内部封装自定义组件的代码
注意在创建自定义组件时，可以通过传入对应的属性值进行初始化操作，要通过{ 参数 }的形式操作，如图中的Row组件和SwitchButton组件

即当一个自定义组件内部有元素（或属性）需要创建时指定初始值则可以将该值在自定义组件中提取为一个内部属性，而不用进行本地初始化

导入和导出

前文入门篇已简单介绍过导入和导出的语法，在自定义组件中，我们也可以将自定义组件封装在一个文件内部，通过导入和导出的方式进行使用
导出：

导入：

状态驱动视图更新

通过操作状态数据间接改变ui（无需像QT设计槽函数那样实现跳转）

@State 装饰器定义状态变量
定义了状态变量后，通过if else来进行条件渲染，通过此使得状态变量关联了状态和视图。本质就是写一个if else语句，只是UI视图的改变无需我们做，我们只要关联其状态即可
简单示例如图：
通过状态变量isOn来控制UI的改变（图片变化）