HarmonyOS中ArkUi框架中常用的装饰器
目录
1.装饰器
1）@Component
1--装饰内容
2）@Entry
1--装饰内容
2--使用说明
3）@Preview
1--装饰内容
2--使用说明
4）@CustomDialog
1--装饰内容
2--使用说明
5）@Observed
1--装饰内容
2--使用说明
6）@ObjectLink
1--装饰内容
2--使用说明
7）@Builder
1--装饰内容
2--使用说明
8）@Extend
1--装饰内容
2--使用说明
9）@Style
1--装饰内容
2--使用说明
10）@Prop
1--装饰内容
2--使用说明
11）@State
1--装饰内容
2--使用说明
12）@Link
1--装饰内容
2--使用说明
13）@Provide
1--装饰内容
2--使用说明
14）@Consume
1--装饰内容
2--使用说明
15）@Watch
1--装饰内容
2--使用说明
2:案例:自定义组件
3.案例:自定义组件的使用
4.组件预览
5.案例:样式复用
1.装饰器
1）@Component
1--装饰内容
struct
2--使用说明
@Component用于定义一个UI组件类。这个装饰器可以指定组件的一些属性，如模板文件、样式文件
2）@Entry
1--装饰内容
struct
2--使用说明
被装饰的组件会被作为页面的入口组件，页面加载时渲染显示
3）@Preview
1--装饰内容
struct
2--使用说明
自定义组件被@Preview 修饰后可以在DevEco的预览器里面看到自定义组件的样子
4）@CustomDialog
1--装饰内容
struct
2--使用说明
用于装饰自定义弹窗.通过这个装饰器，开发者可以定义一个具有特定UI和行为的对话框。
5）@Observed
1--装饰内容
class
2--使用说明
@Observed标记的属性会触发观察者模式，当该属性发生变化时，系统会自动更新相关的UI元素。
6）@ObjectLink
1--装饰内容
class
2--使用说明
被装饰的对象，父组件改变对象的属性或者子组件改变对象数据时，与该对象关联的组件都会被更新。
7）@Builder
1--装饰内容
方法
2--使用说明
允许将重复使用的 UI 代码抽象成方法，并可以在 build 方法中调用。被 @Builder 装饰的方法只能在 build 方法内部或其他 @Builder 方法中调用
8）@Extend
1--装饰内容
方法
2--使用说明
允许一个组件继承另一个组件的样式，从而可以复用已有的样式定义。
9）@Style
1--装饰内容
方法
2--使用说明
提供了一种方式来集中管理样式规则，减少样式的重复定义，提高代码的可维护性。类less和sass中的"混入"（Mixin）
10）@Prop
1--装饰内容
基本数据类型
2--使用说明
用于定义从父组件传递到子组件的属性。这些属性可以用来配置子组件的行为或外观。
11）@State
1--装饰内容
基本数据类型,类，数组
2--使用说明
用于声明组件的状态变量。状态变量的变化会触发 UI 的重新渲染。
12）@Link
1--装饰内容
基本数据类型，类，数组
2--使用说明
用于创建两个状态之间的链接。当一个状态发生变化时，另一个状态也会相应地更新。类似vue中的v-model指令，两个不同的组件绑定同一个变量，一个组件使这个变量改变，另外一个也会跟着改变。
13）@Provide
1--装饰内容
基本数据类型，类，数组
2--使用说明
装饰的数据作为数据的提供方，可以更新其子孙节点的数据，会刷新绑定该数据的组件。类似安卓中内容提供者，不同的应用的程序调用向外暴漏的数据。
14）@Consume
1--装饰内容
基本数据类型，类，数组
2--使用说明
装饰的数据感知到@provide装饰的变量更新后，会重新渲染该组件。这个类似安卓中的内容观察者，检测到数据变化后会做出相应的操作.
15）@Watch
1--装饰内容
状态变量(被@State,@Prop,@Link,@ObjectLink,@Provide,@Cunsume,@StorageProp,@StorageLink修饰的变量)
2--使用说明
监听状态的变化量
2:案例:自定义组件
@Component
struct 组件名字{
build(){
//这里写的是组件内容
}
}
//自定义组件 @Component struct myTextShow{ build() { Text("你们好啊") //字体组件 .id('HelloWorld') .fontSize(50) .fontWeight(FontWeight.Bold) //加粗 .fontColor($r('app.color.start_window_background'))//文字颜色 .width('50%') //宽度 .height('65%') .backgroundImage($rawfile('boy.png')) //背景图片 .alignRules({ center: { anchor: '__container__', align: VerticalAlign.Center }, middle: { anchor: '__container__', align: HorizontalAlign.Center } }) } }
3.案例:自定义组件的使用
import myTextShow from './MyDiv'; //导入组件 @Entry @Component struct Index { @State message: string = 'Hello World'; build() { RelativeContainer() { //这是我们自定义的那个组件 myTextShow() } } }
4.组件预览
//自定义组件 @Component @Preview //组件预览 export default struct myTextShow{ build() { Text("这是预览组件") //字体组件 .id('HelloWorld') .fontSize(50) .fontWeight(FontWeight.Bold) //加粗 .fontColor($r('app.color.start_window_background'))//文字颜色 .width('50%') //宽度 .height('65%') .backgroundImage($rawfile('boy.png')) //背景图片 .alignRules({ center: { anchor: '__container__', align: VerticalAlign.Center }, middle: { anchor: '__container__', align: HorizontalAlign.Center } }) } }//export default 把该组件导出去，供别人使用
5.案例:样式复用
@Entry @Component struct Index { @State message: string = 'Hello World'; //导入组件 build() { RelativeContainer() { Column(){ Button("黄色按钮") .width(200) .height(100) .fontColor($r("app.color.my_red")) .myStyle() Button("默认按钮") .myStyle2() .width(200) .height(100) Button("按钮4") .myStyle3() .width(200) .height(100) Button("按钮5") .myStyle4() .width(200) .height(100) } .padding(20) } } } @Styles function myStyle() { .backgroundColor($r("app.color.my_yellow")) } @Styles function myStyle2() { .backgroundColor($r("app.color.my_red")) } @Styles function myStyle3() { .backgroundColor($r("app.color.my_green")) } @Styles function myStyle4() { .backgroundColor($r("app.color.start_window_background")) }
