Trung tâm cá nhân
sách gpt4 ai đã đi

鸿蒙页面开发-扩展组件样式@Extend

In lại 作者：撒哈拉 更新时间：2025-02-08 11:15:54 59 4
mua khóa gpt4 Nike

这篇文章介绍一个装饰器 @Extend，它的主要作用是：用于扩展原生组件的样式 。

ngữ pháp

@Extend(UIComponentName) function functionName { ... }

定义规则:

  1. UIComponentName：组件名称，例如 Text,Button
  2. 后面必须跟 Chức năng 关键字
  3. 只能在全局定义，不支持组件内定义

Ví dụ

比如我们扩展 Text 组件的样式，为其添加一个默认的 fontSize 和 fontColor，如下:

@Entry @Component struct Index { build() { Text('碧玉妆成一树高，万条垂下绿丝绦。') .TextExtend() } } @Extend(Text) function TextExtend() { .fontSize(20) .fontColor(Color.Blue) }

通过上面的代码，我们就为 Text 组件扩展了一些样式，让其拥有了默认的字体大小和字体颜色，效果如下:

img_1.png

因为@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()}) } } }

Tóm tắt

  1. @Extend 支持组件的私有属性和私有方法。并且只能在全局定义，不支持组件内部定义 （@Styles只支持通用属性和通用方法，可以在全局定义，也可以在组件内定义）
  2. @Extend 支持传参，也可以传入状态变量，当变量改变的时候，UI也会重新渲染（@Style不支持传参）

cuối cùng

如果大家有不理解的地方可以留言，或自行阅读文档 文档地址 。

最后此篇关于鸿蒙页面开发-扩展组件样式@Extend的文章就讲到这里了,如果你想了解更多关于鸿蒙页面开发-扩展组件样式@Extend的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

59 4 0
Bài viết được đề xuất: Tôi không hiểu nổi, tại sao DeepSeek lại đột nhiên ngang hàng với GPT?
Bài viết được đề xuất: 12. Cấu hình hoạt động cụm Redis (sơ đồ rất chi tiết, mô tả chi tiết kèm ảnh chụp màn hình)
Bài viết được đề xuất: 在阿里云ECS上一键部署DeepSeek-R1
Bài viết được đề xuất: RestClient通过拦截器实现请求加密
Sa mạc Sahara
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com