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")) }
