harmonyOS学习笔记之@Styles装饰器与@Extend装饰器

@Styles装饰器

定义组件重用样式
自定义样式函数使用装饰器
可以定义在组件内或全局,内部优先级>外部,内部不需要function,外部需要function
定义在组件内的@styles可以通过this访问组件内部的常量和状态变量,可以在@styles里通过事件来改变状态变量
弊端:只支持通用属性和通用事件 不能传参

@Entry
@Component
struct StylesFun {@State count: number = 100@State bc: Color|string = Color.Blue// 组件内部@Styles interiorStyle() {.width(200).height(this.count).backgroundColor(this.bc).onClick(() => {this.count++if(this.bc==Color.Blue||this.bc=='blue'){this.bc='green'}else{this.bc='blue'}})}build() {Row() {Column() {Text('我是组件内部@Styles的样式').fontSize(30).interiorStyle()Text('我是全局@Styles的样式').fontSize(30).overallStyle()}.width('100%')}.height('100%')}
}
// 全局
@Styles function overallStyle () {.width(150).height(100).backgroundColor(Color.Pink)
}

@Extend装饰器

定义扩展组件样式
在@Styles的基础上,用于扩展原生组件样式
仅支持定义在全局,不支持在组件内部定义
支持封装指定的组件的私有属性和私有事件,也支持预定义相同组件的@Extend的方法
支持参数,可传递参数
参数可以为Function,或者 ()=>{} ,作为Event事件,例如:

@Extend(Text) function sizeColor(FSize:string|number,FColor?:string|Color){.fontSize(FSize).fontColor(FColor)
}
@Extend(Button) function testClick(FSize:string|number,click:()=>void) {.fontSize(FSize).width(300).height(50).click()
}
@Entry
@Component
struct ExtendFun {@State message: string = 'Hello World'@State count: number = 0onClickAdd() {this.count++}build() {Row() {Text('我是数字:'+this.count).sizeColor(40,Color.Pink)Button('点我...快点我...').testClick(40,()=>{this.onClickAdd()})}}
}

参数也可以是状态变量,当状态变量改变时,UI可以正常的被刷新渲染

当然 这只是我的学习笔记 ,若有什么不足之处还望大佬指出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210309.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度模型训练时CPU或GPU的使用model.to(device)

一、使用device控制使用CPU还是GPU device torch.device("cuda:0" if torch.cuda.is_available() else "cpu") # 单GPU或者CPU.先判断机器上是否存在GPU,没有则使用CPU训练 model model.to(device) data data.to(device)#或者在确定有GPU的…

解决 Cannot read properties of undefined (reading ‘getUserMedia‘) 报错

[TOC](解决 Cannot read properties of undefined (reading ‘getUserMedia’) 报错) 0. 背景 使用浏览器输入语音时,浏览器的控制台里面有下面错误信息。 Cannot read properties of undefined (reading getUserMedia)1. 解决方法 在浏览器中访问 chrome://fla…

半导体材料

半导体材料 电子元器件百科 文章目录 半导体材料前言一、半导体材料是什么二、半导体材料的类别三、半导体材料的应用实例四、半导体材料的作用原理总结前言 半导体材料具有独特的电学性质,使其在电子器件和集成电路中有广泛的应用。通过控制半导体材料中载流子的浓度和运动方…

数字化浪潮下,你的企业数字化转型了吗?

企业数字化转型面临的挑战 技术转型挑战:数字化转型涉及到各种新技术、新软件和新硬件,需要企业有一定的技术实力和专业知识,并且需要不断学习和适应变化。对于传统企业来说,可能面临技术门槛高、技术更新快等问题。组织结构转型…

如何用flex布局设计登录页?

使用 Flex 布局设计登录页是一种简单而灵活的方式&#xff0c;让页面在不同屏幕大小下都能有良好的布局。以下是一个简单的例子&#xff0c;演示如何使用 Flex 布局设计登录页&#xff1a; HTML 结构&#xff1a; <!DOCTYPE html> <html lang"en"> <…

从Android源码中生成系统签名文件

从Android源码中生成系统签名文件 文章目录 从Android源码中生成系统签名文件1、在linux中打开编译android源码目录。2、cd到签名文件位置3、生成 platform.pem文件4、生成 platform.p12 文件5、生成 最终的 platform.jks系统签名文件6、把platform.jks 放到Studio 项目app 根目…

word中,文本框如何跨页?

我们经常使用word编辑一些文档&#xff0c;文档中往往会有一些比较大的文本框&#xff0c;需要跨多页&#xff0c;我们可以使用本文章中的方法&#xff0c;将文本框连接在一起&#xff0c;是的内容自动跨页。 在文字中插入两个文本框如下图&#xff1a; 将内容放到第一个文本框…

ubuntu上搭建bazel编译环境,构建Android APP

背景是github上下载的工程&#xff0c;说明仅支持bazel编译&#xff0c;折腾了一天Android studio&#xff0c;失败。 不得不尝试单价bazel编译环境&#xff0c;并不复杂&#xff0c;过程记录如下 说明&#xff1a;ubuntu环境是20.04&#xff0c;pve虚拟机安装 1.安装jdk sudo…

Android audio环形缓冲队列

1、背景 在学习audio的过程中&#xff0c;看到了大神zyuanyun的博客&#xff0c;在博客的结尾&#xff0c;大神留下了这些问题&#xff1a; 但是大神没有出后续的博文来说明audio环形缓冲队列的具体实现&#xff0c;这勾起了我强烈的好奇心。经过一段时间的走读代码&#xff…

朴素贝叶斯 朴素贝叶斯原理

朴素贝叶斯 朴素贝叶斯原理 判别模型和生成模型 监督学习方法又分生成方法 (Generative approach) 和判别方法 (Discriminative approach)所学到的模型分别称为生成模型 (Generative Model) 和判别模型 (Discriminative Model)。 朴素贝叶斯原理 朴素贝叶斯法是典型的生成学习…

深度学习之全面了解网络架构

在这篇文章中&#xff0c;我们将和大家探讨“深度学习中的网络架构”这个主题&#xff0c;解释相关背景知识&#xff0c;并就一些问题进行解答。 我选择的问题反映的是常见用法&#xff0c;而不是学术用例。我将概括介绍该主题&#xff0c;然后探讨以下四个问题&#xff1a; …

Java的I/O演进之路

文章目录 通信技术整体解决的问题1 I/O 模型基本说明2 I/O模型Java BIOJava NIOJava AIO 3 BIO、NIO、AIO 适用场景分析 通信技术整体解决的问题 局域网内的通信要求。多系统间的底层消息传递机制。高并发下&#xff0c;大数据量的通信场景需要。游戏行业。无论是手游服务端&a…

区块链的可拓展性研究【04】分片

分片属于layer1扩容 区块链分片是一种技术实现&#xff0c;可以将区块链网络分成多个片段&#xff0c;每个片段负责处理一部分的交易数据。这种方法可以提高区块链网络的处理速度和吞吐量&#xff0c;降低交易确认时间和费用&#xff0c;同时也可以减轻节点运行负担。 在传统…

【出现模块node_modules里面包找不到】

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 一、出现的问题二、解决办法三、其它可供参考 一、出现的问题 在本地运行 npm run docs:dev之后&#xff0c;出现 Error [ERR_MODULE_NOT_FOUND]: Cannot find package Z:\Blog\docs\node_modules\htmlparser2\ imported from Z:\Blo…

微信小程序base64与十六进制相互转换(使用btoa、atob方法报undefined)

前言&#xff1a;搜到很多方法都用到了btoa()、atob()&#xff0c;这两个属于Window 对象&#xff0c;在浏览器端可以直接使用&#xff0c;但是在小程序里面使用会报undefined。看到uniapp和微信小程序官方文档都提供了下面两个api&#xff0c;就想着经过ArrayBuffer 对象转换一…

入门Redis学习总结

记录之前刚学习Redis 的笔记&#xff0c; 主要包括Redis的基本数据结构、Redis 发布订阅机制、Redis 事务、Redis 服务器相关及采用Spring Boot 集成Redis 实现增删改查基本功能 一&#xff1a;常用命令及数据结构 1.Redis 键(key) # 设置key和value 127.0.0.1:6379> set …

解释AI决策,这10个强大的 Python 库记得收藏!

本文整理了10个常用于可解释AI的Python库&#xff0c;方便我们更好的理解AI模型的决策。 什么是XAI&#xff1f; XAI&#xff08;Explainable AI&#xff09;的目标是为模型的行为和决策提供合理的解释&#xff0c;这有助于增加信任、提供问责制和模型决策的透明度。XAI 不仅…

《深入浅出进阶篇》洛谷P3197 越狱——集合

洛谷P3197 越狱 题目大意&#xff1a; 监狱有 n 个房间&#xff0c;每个房间关押一个犯人&#xff0c;有 m 种宗教&#xff0c;每个犯人会信仰其中一种。如果相邻房间的犯人的宗教相同&#xff0c;就可能发生越狱&#xff0c;求有多少种状态可能发生越狱。 答案对100,003 取模。…

Temu卖家如何获取流量?Temu新手卖家流量来源哪里?——站斧浏览器

流量对于每个平台来说都是很重要的&#xff0c;那么Temu卖家如何获取流量&#xff1f;流量来源哪里&#xff1f; Temu卖家如何获取流量&#xff1f; 1、优化产品标题和描述&#xff1a;在Temu平台上&#xff0c;买家通常通过搜索关键词来寻找他们感兴趣的产品。因此&#xff…

【数电笔记】58-同步D触发器

目录 说明&#xff1a; 1. 电路组成 2. 逻辑功能 3. 特性表、特性方程 4. 状态转移图 例题 5. 同步D触发器的特点 6. 集成同步D触发器&#xff1a;74LS375 74LS375内部原理 说明&#xff1a; 笔记配套视频来源&#xff1a;B站本系列笔记并未记录所有章节&#xff0c;…