【OpenHarmony】ArkTS 语法基础 ⑦ ( 声明式 UI 的特征 | 声明式描述 | 状态驱动视图更新 | 创建并使用自定义组件 | 设置组件属性 | 自定义组件配置 | 容器组件设置 )
【OpenHarmony】ArkTS 语法基础 ⑦ ( 声明式 UI 的特征 | 声明式描述 | 状态驱动视图更新 | 创建并使用自定义组件 | 设置组件属性 | 自定义组件配置 | 容器组件设置 )
参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍
博客源码 :
一、声明式 UI 的特征
1、声明式 UI 的特征
声明式 UI 的特征 :
- 声明式描述 : 在 build 函数中 , 描述 UI 组件呈现的结果 ;
- 状态驱动视图更新 : 通过 @State / @Link 等装饰器 定义 状态数据 , 在 UI 组件中 , 使用这些状态数据进行 数据渲染 , 一旦 状态数据改变则重新调用 build 函数进行渲染 ;
- 开发过程中 , 开发者不会直接操作 UI 组件 , 而是通过 修改 状态数据 而改变 UI 组件的渲染状态 ;
2、声明式描述
在下面的 build 函数中 , 描述了 Column 布局组件 和 MyComponent 自定义组件 / Text 组件 的 展示效果 ,
MyComponent 自定义组件 和 Text 组件 在 Column 布局组件 中纵向排列 ;
@Component
struct Example {
// 父容器中的状态数据
@State isFatherSelected: boolean = false;
build() {
// 必须使用布局组件包括子组件
Column(){
// 自定义子组件
MyComponent({isSonSelected: $isFatherSelected});
// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
.fontSize(20)
.fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
.backgroundColor(Color.Black)
}
}下面的代码中 , 红色矩形框中的内容是 声明式描述 ;
3、状态驱动视图更新
" 状态 " 是 驱动 UI 视图 变化的数据源 , 一般是由 @State 装饰器 装饰的变量 ;
UI 视图 在 渲染时 , 使用了该 状态 变量 , 则该 视图 就与该 状态 进行了关联绑定 , 当 状态数据 发生改变时 , 视图也会进行刷新 重新渲染 ;
在上述 自定义组件 中 , 定义了 @State isFatherSelected: boolean 状态数据 ,
@State isFatherSelected: boolean = false;在 Text 组件中 , 使用了该状态数据进行了渲染 ,
- 如果 isFatherSelected 值为 true , 则将文本颜色设置为 黄色 ;
- 如果 isFatherSelected 值为 false , 则将文本颜色设置为 白色 ;
// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
.fontSize(20)
.fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
.backgroundColor(Color.Black)4、完整代码
上面讲解的代码的 完整代码如下 :
// 导入外部自定义子组件
import {MyComponent} from '../view/MyComponent';
@Entry
@Component
struct Example {
// 父容器中的状态数据
@State isFatherSelected: boolean = false;
aboutToAppear(){
console.log("HSL Example aboutToAppear")
}
onPageShow() {
console.log("HSL Example onPageShow")
}
onBackPress() {
console.log("HSL Example onBackPress")
}
build() {
// 必须使用布局组件包括子组件
Column(){
// 自定义子组件
MyComponent({isSonSelected: $isFatherSelected});
// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
.fontSize(20)
.fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
.backgroundColor(Color.Black)
}
}
onPageHide() {
console.log("HSL Example onPageHide")
}
aboutToDisappear(){
console.log("HSL Example aboutToDisappear")
}
}二、创建并使用自定义组件
1、自定义组件定义
自定义组件概念 : 通过将
- OpenHarmony 系统 内置的基础组件 ,
- 其它自定义组件 ,
封装起来 , 得到一个 可重用 的 , 可与其它组件组合使用的 UI 单元 , 这就是 自定义组件 ;
自定义组件 , 一般使用 @Component 装饰器 进行装饰 ;
@Component
export struct MyComponent {2、自定义组件声明
定义完 自定义组件 A 之后 , 还需要在 使用该 自定义组件的 " 另外的 自定义组件 B " 中 的 build() 渲染函数中的 某个 布局组件 中 , 调用 自定义组件 A 的 构造函数 声明该组件 ;
build() 函数 是 进行 " 声明式 UI 描述 " 的位置 ;
一个 布局组件 中 , 使用 大括号 描述 该布局组件 中 有哪些子组件 , 在 布局组件 构造函数 后的 大括号 中 , 声明 其它组件 , 就是将 被声明的组件 , 放入了 布局组件中 ;
代码示例 : 在 Example 组件中 , 使用 MyComponent 自定义组件 ;
@Component
struct Example {
build() {
// 必须使用布局组件包括子组件
Column(){
// 自定义子组件
MyComponent({isSonSelected: $isFatherSelected});
// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
.fontSize(20)
.fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
.backgroundColor(Color.Black)
}
}三、设置组件属性
1、自定义组件配置
在 ArkTS 中 , 支持使用 . 运算符 的 方式 , 设置 组件的属性 ,
具体的 属性参考 , 可以查询 DevEco Studio 的 API 参考文档 ;
设置 Text 文本组件的 一系列属性 ,
// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
.backgroundColor(Color.Black)在 API 参考 窗口 中 , 可以查看要设置哪些属性 ;
2、容器组件设置
容器组件 是 用于描述 多个组件 之间的 布局关系的 组件 , 又称为 " 布局组件 " ;
容器组件 可以在 OpenHarmony 的 ArkTS 组件 的 容器组件 下面查询 , 下面 API 参考窗口中 , 显示的是 Column 容器组件的属性 ;
在下面的布局声明中 , Column 布局组件中 , 放置了 2 个子组件 , 上下排列 ;
build() {
// 必须使用布局组件包括子组件
Column(){
// 自定义子组件
MyComponent({isSonSelected: $isFatherSelected});
// 另外的子组件
Text('父容器状态 : ' + this.isFatherSelected)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor(this.isFatherSelected ? Color.Yellow : Color.White)
.backgroundColor(Color.Black)
}
}