建站交流,科技网站模板,个人简历模板word可编辑免费,wordpress 禁止下载1、装饰器
装饰器是用于装饰类、结构、方法以及变量#xff0c;并赋予其特殊的含义。如#xff1a;
Component表示自定义组件Entry表示该自定义组件为入口组件State表示组件中的状态变量#xff0c;状态变量变化会触发UI刷新。
2 、语法范式
Builder/BuilderParam#…1、装饰器
装饰器是用于装饰类、结构、方法以及变量并赋予其特殊的含义。如
Component表示自定义组件Entry表示该自定义组件为入口组件State表示组件中的状态变量状态变量变化会触发UI刷新。
2 、语法范式
Builder/BuilderParam特殊的封装UI描述的方法细粒度的封装和复用UI描述如抽取组件。
build() {Column() {Scroll() {Column() {this.LoginButton()}}.width(Constants.MATCH_PARENT).backgroundColor($r(app.color.app_background)).padding(15)}Builder LoginButton() {Button($r(app.string.login)).width(Constants.MATCH_PARENT).height(40).borderRadius(20).fontSize(16).margin({ top: 50 }).fontWeight(500).enabled(true).fontColor(Color.White).backgroundColor($r(app.color.blue)).onClick(() {})}Extend/Style扩展内置组件和封装属性样式更灵活地组合内置组件。 Extend 和 Style的区别 和Styles不同Extend仅支持定义在全局不支持在组件内部定义。和Styles不同Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的Extend的方法。和Styles不同Extend装饰的方法支持参数开发者可以在调用时传递参数调用遵循TS方法传值调用。Extend装饰的方法的参数可以为function作为Event事件的句柄。Extend的参数可以为状态变量当状态变量改变时UI可以正常的被刷新渲染。Styles方法不支持参数。Styles可以定义在组件内或全局在全局定义时需在方法名前面添加function关键字组件内定义时则不需要添加function关键字。定义在组件内的Styles可以通过this访问组件的常量和状态变量并可以在Styles里通过事件来改变状态变量的值。组件内Styles的优先级高于全局Styles。框架优先找当前组件内的Styles如果找不到则会全局查找。
// xxx.ets
Extend(Text) function textStyle (fontSize: number) {.fontColor(Color.Red).fontSize(fontSize)
}// 定义在全局的Styles封装的样式
Styles function globalText() {.width(150).height(100).backgroundColor(Color.Pink)
}Entry
Component
struct ExtendPage {build() {Row({ space: 10 }) {Text(Extend).textStyle(16)Text(Style).globalText().fontSize(30)}}
}stateStyles多态样式可以依据组件的内部状态的不同设置不同样式。 stateStyles是属性方法可以根据UI内部状态来设置样式。ArkUI提供以下四种状态 focused获焦状态。normal正常状态。pressed按压状态。disabled不可用状态。
// Styles和stateStyles联合使用Entry
Component
struct MyComponent {Styles normalStyle() {.backgroundColor(Color.Gray)}Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Text(Text1).fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}
}
