OpenHarmony定义扩展组件样式:@Extend装饰器
在前文的示例中,可以使用@Styles用于样式的扩展,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式。
说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用。
装饰器使用说明
语法
@Extend(UIComponentName) function functionName { ... }
使用规则
● 和@Styles不同,@Extend仅支持定义在全局,不支持在组件内部定义。
● 和@Styles不同,@Extend支持封装指定的组件的私有属性和私有事件,以及预定义相同组件的@Extend的方法。
// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
.fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText(size:number) {
.fontSize(size)
.fancy()
}
● 和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。
// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
} @Entry
@Component
struct FancyUse {
build() {
Row({ space: 10 }) {
Text('Fancy')
.fancy(16)
Text('Fancy')
.fancy(24)
}
}
}
● @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的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
} @Entry
@Component
struct FancyUse {
@State fontSizeValue: number = 20
build() {
Row({ space: 10 }) {
Text('Fancy')
.fancy(this.fontSizeValue)
.onClick(() => {
this.fontSizeValue = 30
})
}
}
}
使用场景
以下示例声明了3个Text组件,每个Text组件均设置了fontStyle、fontWeight和backgroundColor样式。
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World' build() {
Row({ space: 10 }) {
Text(`${this.label}`)
.fontStyle(FontStyle.Italic)
.fontWeight(100)
.backgroundColor(Color.Blue)
Text(`${this.label}`)
.fontStyle(FontStyle.Italic)
.fontWeight(200)
.backgroundColor(Color.Pink)
Text(`${this.label}`)
.fontStyle(FontStyle.Italic)
.fontWeight(300)
.backgroundColor(Color.Orange)
}.margin('20%')
}
}
@Extend将样式组合复用,示例如下。
@Extend(Text) function fancyText(weightValue: number, color: Color) {
.fontStyle(FontStyle.Italic)
.fontWeight(weightValue)
.backgroundColor(color)
}
通过@Extend组合样式后,使得代码更加简洁,增强可读性。
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World' build() {
Row({ space: 10 }) {
Text(`${this.label}`)
.fancyText(100, Color.Blue)
Text(`${this.label}`)
.fancyText(200, Color.Pink)
Text(`${this.label}`)
.fancyText(300, Color.Orange)
}.margin('20%')
}
}
OpenHarmony定义扩展组件样式:@Extend装饰器的更多相关文章
- 巨蟒python全栈开发django5:组件&&CBV&FBV&&装饰器&&ORM增删改查
内容回顾: 补充反向解析 Html:{% url ‘别名’ 参数 %} Views:reverse(‘别名’,args=(参数,)) 模板渲染 变量 {{ 变量名 }} 逻辑相关 {% %} 过滤器: ...
- day054 组件 CBV FBV 装饰器 ORM增删改查
组件: 把一小段HTML 放在一个HTML中 nav.html 使用: {% include ‘nav.html ’ %} 一. FBV 和CBV 1.FBV(function base ...
- global与nonlocal关键字、函数名的多种用法、函数的嵌套调用、函数的嵌套定义、闭包函数、装饰器简介
目录 一.global与nonlocal关键字 二.函数名的多种用法 三.函数的嵌套调用 四.函数的嵌套定义 五.闭包函数 六.装饰器简介 一.global与nonlocal关键字 global方法: ...
- stenciljs 学习四 组件装饰器
stenciljs 可以方便的构建交互式组件 支持以下装饰器 component prop watch state method element component 说明 component 包含ta ...
- 第7.17节 Python类中的静态方法装饰器staticmethod 定义的静态方法深入剖析
第7.17节 Python类中的静态方法装饰器staticmethod 定义的静态方法深入剖析 静态方法也是通过类定义的一种方法,一般将不需要访问类属性但是类需要具有的一些能力可以静态方法提供. 一 ...
- JavaScript 的装饰器:它们是什么及如何使用
请访问我的独立博客地址:https://imsense.site/2017/06/js-decorator/ 装饰器的流行应该感谢在Angular 2+中使用,在Angular中,装饰器因TypeSc ...
- 装饰器模式-Decerator
一.定义 装饰器模式又叫做包装模式(Wrapper).装饰器模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 在以下情况下应该使用装饰器模式: 1.需要扩展一个类的功能,或给一个类增 ...
- python描述符(descriptor)、属性(property)、函数(类)装饰器(decorator )原理实例详解
1.前言 Python的描述符是接触到Python核心编程中一个比较难以理解的内容,自己在学习的过程中也遇到过很多的疑惑,通过google和阅读源码,现将自己的理解和心得记录下来,也为正在为了该问题 ...
- EntityFramework中使用Repository装饰器
铺垫 通常在使用 EntityFramework 时,我们会封装出 IRepository 和 IUnitOfWork 接口,前者负责 CRUD 操作,后者负责数据提交 Commit. public ...
- Python_Day_5装饰器、字符串格式化、序列化、内置模块、生成器、迭代器之篇
一.装饰器 为什么要用装饰器??? 在实际的开发环境中应遵循开发封闭原则,虽然在这个原则是用的面向对象开发,但也适用于函数式编程,简单地说,它规定已经实现的功能代码不是允许修改的,但是可以被扩展: 封 ...
随机推荐
- day02---虚拟机上网模式
修改虚拟网络编辑器 虚拟软件网络模式介绍 NAT网络模式 特点:虚拟主机和宿主机网络信息 可以不一致 优点:不容易出现局域网中IP地址冲突 缺点:其它宿主机不能直接访问虚拟机 桥接网络模式 特点:虚拟 ...
- 新来个架构师,用48张图把OpenFeign原理讲的炉火纯青~~
大家好,我是三友~~ 在很久之前,我写过两篇关于OpenFeign和Ribbon这两个SpringCloud核心组件架构原理的文章 但是说实话,从我现在的角度来看,这两篇文章的结构和内容其实还可以更加 ...
- Nebula Graph 特性讲解——RocksDB 统计信息的收集和展示
由于 Nebula Graph 的底层存储使用了 RocksDB,出于运维管理需要,我们的社区用户 @chenxu14 在 pr#2243 为 Nebula Graph 贡献了 RocksDB 统计信 ...
- 用linux命令cd 查找想要找的文件
如果想找文件Computer下的bin文件,在终端输入绝对路径 cd /bin,不能输入 cd /Computer/bin,因为文件目录不对 文件目录可以在文件的终端看到,/bin就是正确的目录 比如 ...
- C++ //案列-评委打分 //(容器添加 删除 算法排序 随机数 字符串追加)描述:5名选手 ABCDE,10个评委分别对每一位选手打分,去除最高分,去除评委中的 //的最低分,取平均分
1 #include<iostream> 2 #include<string> 3 #include<deque> 4 #include<vector> ...
- (完美解决)chatGPT登陆正常却无法发送消息
这几天要写关于项目的文字性材料,登陆上chatgpt,结果发现登陆正常,各方面都正常,但是点击发送消息就会不停转圈圈,无法发送出去,然后联想到之前看到朋友圈有人说chatGPT崩了,就没多在意,结果今 ...
- Zabbix技术分享——snmp异常排查指南
大家好,我是乐乐.在IT运维中,难免会碰上设备snmp不通的情况,那么,当问题出现的时候,运维工程师该如何快速找到问题所在呢?下面让我们一起来看看吧! 1.IP配置检查 首先检查zabbix监控上 ...
- electron fiddle 下载 镜像 下载不下来 已解决 electron-api-demos 安装
fiddle 官网 https://www.electronjs.org/fiddle 一共3步 1. npm config set registry https://registry.npm.tao ...
- python tkinter - pickle 持久化
查看当前python版本命令 cmd - python 现在当前版本是 3.8.8 tkinter - tool kits interface
- C++学习笔记之高级语法
目录 高级语法 面向对象--类 对象的属性 运算符重载 拷贝构造函数 IO缓存 头文件的重复包含问题 深拷贝与浅拷贝 面向对象三大特性 高级语法 面向对象--类 C++使用struct.class来定 ...