小白挑战一周上架元服务——装饰器
文章目录
- 前言
- 一、装饰器是什么?
- 二、基础的装饰器
- 1.@Entry
- 2.@Component
- 3.@State
- 4.@Builder
前言
进入真正的开发之前,我们先将需要用到的相关知识进行学习一下。因为鸿蒙中有大量的装饰器,不了解装饰器,我们看不懂页面,也不能进行开发。
所以,第一步,我们先攻克一下将要用到的装饰器知识。
一、装饰器是什么?
装饰器,我觉得就是在原有的基础上进行装饰,赋予特定功能和含义的一种语法。官方的解释是,用于给类、结构体、方法、变量进行装饰,然后赋予特殊的含义。比如@Entry表示自定义组件的入口组件、@Component组件表示自定义组件、@State表示状态组件。
二、基础的装饰器
1.@Entry
- 单词意思:入口;
- 作用:用来修饰自定义组件,表示入口组件。
2.@Component
- 单词意思:组件,组成。
- 作用:表示自定义组件。是个可复用的UI单元,可以组合其他组件(仅能装饰struct关键字声明的数据结构)。
@Entry
@Component
struct MyPage {build() {/// UI描述代码块}
}
3.@State
- 单词意思:状态。
- 作用:用来装饰状态变量,状态变量发生变化会触发UI刷新。
@State message: string = 'This is MyPage';build() {/// UI描述代码块Text(this.message)}
4.@Builder
- 单词意思:建设者;开发者;创建者。
- 作用:自定义构建函数,是个轻量级的UI复用单元。可以在自定义组件内部使用,也可以作为全局自定义构建函数使用。因为实质上也是函数,可以接受参数。
@Entry
@Component
struct MyPage {@State message: string = 'This is MyPage';title:string = '我的页面';build() {/// UI描述代码块Column(){/// 内部构建函数this.header()/// 全局构建函数stateBar(true)}}/// 自定义构建函数@Builderheader(){Row(){Button(){Text('返回')}Text(this.title)}}}/// 全局构建函数
@Builder
function stateBar(isOnline:boolean){Row(){Text(isOnline?'在线':'不在线')}.height(45).backgroundColor(Color.Grey)
}