w3c网站开发,电子商务网站例,html怎么做商品页面,一个完整的企业策划案范文目录
样式复用
Styles方法
Extend方法 组件编程在使用过程中有很多技巧#xff0c;在这里分享样式复用技巧和UI结构复用技巧。
样式复用 我们观察下面的代码#xff0c;在代码中很多重复行的代码#xff0c;如#xff1a; Image 的 .width(30).height(30) 是重复的But…目录
样式复用
Styles方法
Extend方法 组件编程在使用过程中有很多技巧在这里分享样式复用技巧和UI结构复用技巧。
样式复用 我们观察下面的代码在代码中很多重复行的代码如 Image 的 .width(30).height(30) 是重复的Button的 .fontSize(25).width(150).height(65).backgroundColor(Color.Green)是重复的Text 的 .fontSize(20).fontColor(Color.White).fontWeight(500) 是重复的Entry
Component
struct customStyle {State isOn: boolean false;State isDel: boolean false;build() {Column({ space: 10 }) {Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image($r(app.media.icon_new_folder)).width(30).height(30)Text(新建文件).fontSize(20).fontColor(Color.White).fontWeight(500)}}.fontSize(25).width(150).height(65).backgroundColor(Color.Green).onClick(() {console.log(我准备开始建立文件夹);})Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image($r(app.media.icon_new_folder)).width(30).height(30)Text(新建文件).fontSize(20).fontColor(Color.White).fontWeight(500)}}.fontSize(25).width(150).height(65).backgroundColor(Color.Green).onClick(() {console.log(我准备开始建立文件夹);})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}Extend(Image) function consumeImgStyle() {.width(30).height(30)
}Extend(Button) function consumeButtonStyle() {.fontSize(25).width(150).height(65)
}Extend(Text) function consumeBTextStyle() {.fontSize(20).fontColor(Color.White).fontWeight(500)
}当多个组件具有相同的样式时若每个组件都单独设置将会有大量的重复代码。为避免重复代码开发者可使用Styles或者Extend装饰器将多条样式设置提炼成一个方法然后直接在各组件声明的位置进行调用这样就能完成样式的复用。 Styles方法 Styles方法可定义在组件内或者全局。
1. 组件内定义的Styles方法只能在当前组件中使用全局的Styles方法目前只允许在当前的.ets文件中使用2. 组件内定义Styles方法时不需要使用function关键字全局的Styles方法需要使用function关键字3. Styles方法中只能包含通用属性方法和通用事件方法例如在上面的代码中 fontSize(20).fontColor(Color.White).fontWeight(500)也是重复的但这不是通用属性。可以定义的只能是通用属性。4. Styles方法不支持参数5. Styles方法可以用在任意类型的组件上。注意下面的Extend则是使用在定制化组件上。 将上面重复的样式代码分别提取到各自定义的Style方法中直接使用Style方法 定义格式如下。
Styles定义在Struct结构体内部
Styles consumeImgStyle(){.width(30).height(30)}Styles consumeButtonStyle(){.width(150).height(65).backgroundColor(Color.Green)}Styles定义在同一个ets文件中的Struct结构体外部必须加上 function 关键字
Styles function globalConsumeImgStyle() {.width(30).height(30)
}Styles function globalConsumeButtonStyle() {.width(150).height(65).backgroundColor(Color.Green)
}将重复样式代码提取之后直接使用提取后的方法使用Styles方法之后代码。
Entry
Component
struct customStyle {State isOn: boolean false;State isDel: boolean false;build() {Column({ space: 10 }) {Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image($r(app.media.icon_delete)).consumeImgStyle()Text(删除文件).fontSize(20).fontColor(Color.White).fontWeight(500)}}.fontSize(25).width(150).height(65)Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image($r(app.media.icon_new_folder)).consumeImgStyle()Text(新建文件).fontSize(20).fontColor(Color.White).fontWeight(500)}}.consumeButtonStyle().fontSize(25).onClick(() {console.log(我准备开始建立文件夹);})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}Styles consumeImgStyle(){.width(30).height(30)}Styles consumeButtonStyle(){.width(150).height(65).backgroundColor(Color.Green)}
}定义全局使用的Styles方法需要加 functionStyles function globalConsumeImgStyle() {.width(30).height(30)
}Styles function globalConsumeButtonStyle() {.width(150).height(65).backgroundColor(Color.Green)
}
Extend方法 Extend装饰的方法同样可用于组件样式的复用与Styles不同的是
Extend方法只能定义在全局使用范围目前只限于当前的.ets文件Extend方法只能用于指定类型的组件如Button组件Extend方法可包含指定组件的专有属性方法和专有事件方法。Extend方法支持参数传递 重复的代码 Image 的 .width(30).height(30) 是重复的 Button的 .fontSize(25).width(150).height(65) .backgroundColor(Color.Green)是重复的 Text 的 .fontSize(20).fontColor(Color.White).fontWeight(500)是重复的 将上面重复的样式代码分别提取到各自定义的Extend方法中直接使用Extend方法 定义格式如下。
Extend(Image) function consumeImgStyle() {.width(30).height(30)
}Extend(Button) function consumeButtonStyle(color: Color) {.fontSize(25).width(150).height(65).backgroundColor(color)}Extend(Text) function consumeTextStyle(color: Color, size: number, weight: number) {.fontSize(size).fontColor(color).fontWeight(weight)
}将重复样式代码提取之后直接使用提取后的方法使用Extend方法之后代码。
Entry
Component
struct customStyle {State isOn: boolean false;State isDel: boolean false;build() {Column({ space: 10 }) {Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image($r(app.media.icon_new_folder)).consumeImgStyle()Text(新建文件).consumeTextStyle(Color.White, 20, 500)}}.consumeButtonStyle(Color.Green).onClick(() {console.log(我准备开始建立文件夹);})Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image($r(app.media.icon_new_folder)).consumeImgStyle()Text(新建文件).consumeTextStyle(Color.White, 20, 500)}}.consumeButtonStyle(Color.Green).onClick(() {console.log(我准备开始建立文件夹);})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}
}Extend(Image) function consumeImgStyle() {.width(30).height(30)
}Extend(Button) function consumeButtonStyle(color: Color) {.fontSize(25).width(150).height(65).backgroundColor(color)}Extend(Text) function consumeTextStyle(color: Color, size: number, weight: number) {.fontSize(size).fontColor(color).fontWeight(weight)
}UI结构复用 当页面有多个相同的UI结构时若每个都单独声明同样会有大量重复的代码。为避免重复代码可以将相同的UI结构提炼为一个自定义组件完成UI结构的复用。 除此之外ArkTS还提供了一种更轻量的UI结构复用机制Builder方法开发者可以将重复使用的UI元素抽象成一个Builder方法该方法可在build()方法中调用多次以完成UI结构的复用。 Builder装饰的方法同样可用于组件接结构的复用
Builder方法可以定义在组件内或者全局Builder方法定义的是组件内的Builder方法可通过this访问当前组件的属性和方法而全局的Builder方法则不能Builder方法定义的是组件内的Builder方法只能用于当前组件全局的Builder方法导出export后可用于整个应用。
Entry
Component
struct BuilderUI {State isOn: boolean false;State isDel: boolean false;build() {Column({ space: 10 }) {this.builderButton($r(app.media.icon_delete), 删除文件, () {console.log(我准备开始删除文件夹);})globalBuilderButton($r(app.media.icon_new_folder), 新建文件, () {console.log(我准备开始建立文件夹);})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}Builder builderButton(icon: Resource, text: string, callback: () void) {Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image(icon).width(30).height(30)Text(text).fontSize(20).fontColor(Color.White).fontWeight(500).backgroundColor(Color.Green)}}.fontSize(25).width(150).height(65).onClick(callback)}
}Builder function globalBuilderButton(icon: Resource, text: string, callback: () void) {Button({ type: ButtonType.Capsule, stateEffect: true }) {Row({ space: 10 }) {Image(icon).width(30).height(30)Text(text).fontSize(20).fontColor(Color.White).fontWeight(500).backgroundColor(Color.Green)}}.fontSize(25).width(150).height(65).onClick(callback)
}Builder方法支持参数传递规则分为按值传递和按引用传递。带有花括号的{ } 为引用传递其余为值传递。按引用传递时若传递的参数为状态变量则状态变量的变化将会触发Builder方法内部UI的刷新而按值传递时则不会。
Entry
Component
struct BuilderUI {State status: number 10;build() {Column({ space: 10 }) {valueText(this.status)referenceText({status:this.status})Row({ space: 10 }) {Button(值传递 - 1).consumeButtonStyle().onClick(() {this.status--})Button(引用传递 1).consumeButtonStyle().onClick(() {this.status})}}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}Builder function valueText(count: number) {Text(进行值传递: ${count}).fontSize(30).fontWeight(600)
}Builder function referenceText(count: {status:number}) {Text(进行引用传递: ${count.status}).fontSize(30).fontWeight(600)Text(引用参数传递的是状态变量status这里内部UI会刷新)
}Extend(Button) function consumeButtonStyle() {.fontSize(20).width(140).height(65)
}
