鸿蒙页面开发 - 扩展组件样式 @Extend
1.鸿蒙开发 - 支持导出,跨文件使用的自定义样式 AttributeModifier2.鸿蒙开发 - 自定义组件 和 组件通信的方法3.鸿蒙页面开发 - 组件复用样式 @Styles
4.鸿蒙页面开发 - 扩展组件样式 @Extend
这篇文章介绍一个装饰器 @Extend
,它的主要作用是:用于扩展原生组件的样式
语法
@Extend(UIComponentName) function functionName { ... }
定义规则:
- UIComponentName:组件名称,例如
Text
、Button
- 后面必须跟
function
关键字 - 只能在全局定义,不支持组件内定义
举例
比如我们扩展 Text
组件的样式,为其添加一个默认的 fontSize
和 fontColor
,如下:
@Entry
@Component
struct Index {
build() {
Text('碧玉妆成一树高,万条垂下绿丝绦。')
.TextExtend()
}
}
@Extend(Text)
function TextExtend() {
.fontSize(20)
.fontColor(Color.Blue)
}
通过上面的代码,我们就为 Text
组件扩展了一些样式,让其拥有了默认的字体大小和字体颜色,效果如下:
因为@Extend
是作用于单个组件,所以也支持组件的所有属性和事件(包括组件的私有属性),这点和 @Styles
不同
并且他 只能在全局定义,不支持组件内部定义
@Extend支持传参(@Styles不支持)
@Entry
@Component
struct Index {
build() {
Text('碧玉妆成一树高,万条垂下绿丝绦。')
.TextExtend(22)
}
}
@Extend(Text)
function TextExtend(fontSize: number) {
.fontSize(fontSize)
.fontColor(Color.Blue)
}
@Extend传的参数,支持传入状态变量,当变量改变时,UI也会重新渲染
@Entry
@Component
struct Index {
@State fontSize: number = 16
build() {
Text('碧玉妆成一树高,万条垂下绿丝绦。')
.TextExtend(this.fontSize)
.onClick(() => {
this.fontSize = 24
})
}
}
@Extend(Text)
function TextExtend(fontSize: number) {
.fontSize(fontSize)
.fontColor(Color.Blue)
}
效果如下:
@Extend支持调用其他方法,继承其他方法的属性
比如在 TextExtend_1
中定义字体的大小、颜色。在 TextExtend_2
定义背景颜色,并且在 TextExtend_2
中调用 TextExtend_1
方法
@Entry
@Component
struct Index {
build() {
Text('碧玉妆成一树高,万条垂下绿丝绦。')
.TextExtend_2()
}
}
@Extend(Text)
function TextExtend_1() {
.fontSize(20)
.fontColor(Color.Blue)
}
@Extend(Text)
function TextExtend_2() {
.backgroundColor(Color.Gray)
.TextExtend_1()
}
@Extend装饰的方法,参数可以为function,作为Event事件的句柄。
@Extend(Text) function makeMeClick(onClick: () => void) {
.backgroundColor(Color.Blue)
.onClick(onClick)
}
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World';
onClickHandler() {
this.label = 'Hello ArkUI';
}
build() {
Row({ space: 10 }) {
Text(`${this.label}`)
.makeMeClick(() => {this.onClickHandler()})
}
}
}
总结
@Extend
支持组件的私有属性和私有方法。并且只能在全局定义,不支持组件内部定义 (@Styles只支持通用属性和通用方法,可以在全局定义,也可以在组件内定义)@Extend
支持传参,也可以传入状态变量,当变量改变的时候,UI也会重新渲染(@Style不支持传参)
最后
如果大家有不理解的地方可以留言,或自行阅读文档 文档地址
- 语法
- 举例
- @Extend支持传参(@Styles不支持)
- @Extend传的参数,支持传入状态变量,当变量改变时,UI也会重新渲染
- @Extend支持调用其他方法,继承其他方法的属性
- @Extend装饰的方法,参数可以为function,作为Event事件的句柄。
- 总结
- 最后
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/18703736
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目