二、基本UI装饰器

装饰struct#xff0c;页面的入口…一、基础UI组件结构

每个UI组件需要定义为Component

struct对象其内部必须包含一个且只能包含一个build(){}函数用于绘制UIstruct之内、build()函数之外的地方用于存放数据。

二、基本UI装饰器

装饰的变量是组件的局部变量必须本地初始化可通过构造参数赋值当该数据被修改时所在组件的build()方法会被重新调用会重新绘制所在UI

子组价

{Button(这是子组件${this.count}).fontSize(24).onClick(this.toggleClick.bind(this))}.width(100%)}}

父组件

${this.count}).fontSize(24).onClick(this.toggleClick.bind(this))//使用默认初始化值ComponentPage()//设置count初始值为20ComponentPage({

count:

当被点击之后修改了count的值页面会重新绘制UI子组件中的count和父组件的count互不影响可以给子组件构造方法设置初始值使用State修饰的变量必须初始化

效果图

继承State的所有功能被其装饰的变量可以和父组件建立单向同步关系。

Prop装饰的变量是可变的但修改不会同步回父组件当父组件的State变化时本地修改的Prop会被覆盖

子组件

{Button(这是子组件${this.count}).fontSize(24).onClick(this.toggleClick.bind(this))}.width(100%)}}

父组件

${this.count}).fontSize(24).onClick(this.toggleClick.bind(this))ComponentPage({

count:

将父组件的count设置到子组件使用的Prop修饰的变量时父组件与子组件这时建立起单向同步父组件修改值后子组件跟着修改子组件修改值父组件不受影响使用的Prop修饰的变量不能自己初始化

效果图

Link装饰的变量和父组件构建双向同步关系的状态变量父组件会接受来自Link装饰的变量的修改的同步父组件的更新也会同步给Link装饰的变量。

Link装饰的变量与其父组件中的数据源共享相同的值Link装饰器不能在Entry装饰的自定义组件中使用

子组件

{Button(这是子组件${this.count}).fontSize(24).onClick(this.toggleClick.bind(this))}.width(100%)}}

父组件

${this.count}).fontSize(24).onClick(this.toggleClick.bind(this))ComponentPage({

count:

父组件通过$count来和子组件的Link修饰的值绑定绑定之后实现父子双向绑定修改一端另一组件也随之变化使用Link不能自己初始化

效果图

不同点StatePropLink装饰内容基本数据类型类数组基本数据类型基本数据类型类数组关联不与其他控件关联父State

子Prop

双向关联初始化时机声明时创建组件时由参数传入创建组件时由参数传入

Provide、Consume

后代通过使用Consume去获取Provide提供的变量建立在Provide和Consume之间的双向数据同步与State/Link不同的是前者可以在多层级的父子组件之间传递

在父组件中将数据多级传递给子组件子子组件

{Text(this.message).fontSize(50).fontColor(Color.Red).onClick(()

{//点击文字

./ProviderGrandSonPageComponent

export

{Text(this.sonMsg).fontSize(30).fontColor(Color.Green).onClick(()

{this.sonMsg

我是子类})//调用孙子组件子类的子类ProviderGrandSonPage({

grandSonMsg:

{Text(this.grandSonMsg).fontSize(20).fontColor(Color.Blue).onClick(()

{this.grandSonMsg

都需要通过一个多余被Link修饰的变量进行传递太过复杂如果传递层级太深没更加明显

2.发布者订阅者模式

使用发布者Provide和订阅者Consume可以直接传递到子子组件

父组件

{Text(this.message).fontSize(50).fontColor(Color.Red).onClick(()

{this.message

父类A})//调用子组件时就不再需要传递参数ProviderSonPage()}.width(100%)}.height(100%)}

子组件

./ProviderGrandSonPageComponent

export

{Text(this.sonMsg).fontSize(30).fontColor(Color.Green).onClick(()

{this.sonMsg

我是子类})//调用子组件时就不再需要传递参数ProviderGrandSonPage()}}

子子组件

grandSonMsg:string//也可以写成Consume

{Column()

{Text(this.grandSonMsg).fontSize(20).fontColor(Color.Blue).onClick(()

{this.grandSonMsg

使用发布者订阅者模式父类使用Provide其他需要观察的子类使用Consume就可以能实现双向绑定当层级很深时不需要一层一层的往下传递直接使用发布者订阅者进行监听就能实现相同的效果Provide和Consume可以通过相同的变量名或者相同的变量别名绑定变量类型必须相同Provide必须设置初始值Consume不可设置默认初始值Provide修饰的变量和Consume修饰的变量是一对多的关系

效果图

Watch使用观察者模式的装饰器但该装饰器不是触发变量变化而是绑定一个函数当Watch变量变化时调用该函数

Watch和自定义组件更新

CountModifier自定义组件的Button.onClick点击事件自增count由于State

count变量更改子组件TotalView中的Prop被更新其Watch(onCountUpdated)方法被调用更新了子组件TotalView

中的total变量子组件TotalView中的Text重新渲染

Watch与Link组合使用

{ForEach(this.shopBasket,(item)

{Text(Price:

${this.totalPurchase.toFixed(2)}

€)}}

Math.random())))})BasketViewer({

shopBasket:

BasketModifierPage组件的Button.onClick向BasketModifier

shopBasket中添加条目Link装饰的BasketViewer

shopBasket值发生变化状态管理框架调用Watch函数BasketViewer

onBasketUpdated

shopBasket的改变新增了数组项ForEach组件会执行item

totalPurchase改变对应的Text组件也重新渲染重新渲染是异步发生的