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