ArkTS学习笔记_封装复用之@Styles装饰器

ArkTS学习笔记_封装复用之@Styles装饰器

  • 背景:
    在开发中,如果每个组件的样式都需要单独设置,就会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,给出的思路是:提炼和封装相同的样式成方法,方便复用调用,装饰器@Style孕育而生。
  • 作用:
    @Styles装饰器可以将多条样式设置,提炼成一个方法,直接在组件使用的位置调用即可复用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

一、@Styles装饰器使用说明

  1. 当前@Styles仅支持通用属性和通用事件。
  2. @Styles方法不支持参数,反例如下。
// 反例: @Styles不支持参数
@Styles function globalFancy (value: number) {.width(value)
}
  1. @Styles可以定义在组件内或全局。
    在全局定义时需在方法名前面添加function关键字,组件内定义时则不需要添加function关键字。
// 全局,前面添加function关键字
@Styles function functionName() { ... }// 在组件内
@Component
struct FancyUse {// 组件内部,不需要添加function关键字  @Styles fancy() {.height(100)}}
  1. 定义在组件内的@Styles可以通过this访问组件的常量和状态变量,并可以在@Styles里通过事件来改变状态变量的值。
@Component
struct FancyUse {@State heightValue: number = 100@Styles fancy() {.height(this.heightValue) // 可是使用this指向组件本身,调用组件的状态 .backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200 // 可是使用this指向组件本身,给组件的状态赋值 })}
}
  1. 组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles,如果找不到,则会全局查找。

二、以下示例中演示了组件内@Styles和全局@Styles的用法

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {.width(150).height(100).backgroundColor(Color.Pink)
}@Entry
@Component
struct FancyUse {@State heightValue: number = 100// 定义在组件内的@Styles封装的样式@Styles fancy() {.width(200).height(this.heightValue).backgroundColor(Color.Yellow).onClick(() => {this.heightValue = 200})}build() {Column({ space: 10 }) {Text('FancyA').globalFancy() // 和方法一样,调用使用全局的@Styles封装的样式.fontSize(30)Text('FancyB').fancy() // 和方法一样,使用组件内的@Styles封装的样式.fontSize(30)}}
}

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

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

相关文章

jmeter分布式(四)

一、gui jmeter的gui主要用来调试脚本 1、先gui创建脚本 先做一个脚本 演示:如何做混合场景的脚本? 用211的业务比例 ①启动数据库服务 数据库服务:包括mysql、redis mysql端口默认3306 netstat -lntp | grep 3306处于监听状态&#xf…

深入了解MySQL中的innodb_lock_wait_timeout

引言 在数据库管理中,确保数据的一致性和完整性是至关重要的。MySQL的InnoDB存储引擎通过行级锁定机制来实现这一点。然而,当多个事务同时操作数据库时,可能会出现锁等待的情况。了解并合理配置innodb_lock_wait_timeout参数,对于…

数据库第6次作业

内容 1、创建视图v_emp_dept_id_1,查询销售部门的员工姓名和家庭住址 2、创建视图v_emp_dept,查询销售部门员工姓名和家庭住址及部门名称。 3、创建视图v_dept_emp_count(dept_name,emp_count,avg_salay),统计每个部门人数并计算平均工资。 …

Spring 使用log4j

porn.xml 引入依赖 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.23.1</version></dependency><dependency><groupId>org.apache.logging.log4j<…

解读网传《深圳IT圈⭕新解读八小时工作制》

网传深圳IT圈的新解读八小时工作制 工作时间安排&#xff1a; 10:00-12:0014:00-18:0019:00-21:00 初看&#xff1a;有惊喜 上午开始时间晚&#xff1a;相对于传统的9点开始&#xff0c;这种安排允许员工有更多的早晨时间&#xff0c;可以用来休息或处理个人事务。下午和晚上分…

typescript新规范及vue3常用的属性解析【2024】

文章目录 如在vue中 使用tyescript来规范定义类型解释一下 < >的意思 定义 了 personList &#xff1a;是个数组 Array 且要告诉里面每一项 结构长什么样 Array<PersonInter>definepropsvue3中的hooks组件父子组件 方法、数据、相互调用 如在vue中 使用tyescript来…

【LSTM和GRU极简,和最新的TT也就是状态】机器学习模型来学习状态

LSTM&#xff08;长短期记忆网络&#xff09;中的关键参数包括输入门、遗忘门、输出门、细胞状态和隐藏状态。以下是如何进行推理计算的示例&#xff1a; LSTM参数和公式 输入门&#xff08;i_t&#xff09;&#xff1a;决定输入的信息量。 遗忘门&#xff08;f_t&#xff0…

【React Native】做了一个简约的雷达图组件

本文目录 【React Native】做了一个简约的雷达图组件获取组件实现思路用法示例简易用法自定义美化 结语 【React Native】做了一个简约的雷达图组件 最近在使用 react-native 中需要绘制雷达图&#xff0c;没有找到合适的小组件&#xff08;大的图表库未直接提供&#xff0c;需…

pico+unity3d运行测试方法

一. 发布并运行程序 这个就很简单&#xff0c;电脑和pico数据库连接、pico打开开发者模式、运行的时候选择设备pico 二. pico串流助手 1.需要先下载pico的软件 PICO Developer Center、并安装串流助手、这种方式的话&#xff0c;安装了向日葵的小伙伴可能有冲突、百度一下解…

c#中的特性

在C#中&#xff0c;特性&#xff08;Attributes&#xff09;是一种向程序元素&#xff08;如类、方法、属性等&#xff09;添加元数据的方式。特性可以用来提供关于程序元素的附加信息&#xff0c;这些信息可以在编译时和运行时被访问。 特性主要有以下几个用途&#xff1a; 提…

手机数据恢复篇:如何从 Android 设备内恢复数据

如何从 Android 内部存储恢复数据&#xff1f; 要从 Android 内部存储恢复已删除的文件&#xff0c;您需要一个 Android 内部存储恢复应用或程序。请继续阅读以获取可靠的 Android 数据恢复软件&#xff0c;并让它帮助您从 Android 手机的内部存储恢复数据。 是否有可能恢复 An…

Typescript 合并接口

在TypeScript中&#xff0c;合并接口&#xff08;Interface Merging&#xff09;是一种强大的特性&#xff0c;它允许你扩展现有的接口&#xff0c;无论是通过声明合并还是在同一个声明块中直接扩展。这种特性在基于类的面向对象编程中非常有用&#xff0c;但TypeScript的接口合…

4-2 权重衰减

前一节我们描述了过拟合的问题&#xff0c;本节我们将介绍一些正则化模型的技术。 我们总是可以通过去收集更多的训练数据来缓解过拟合。 但这可能成本很高&#xff0c;耗时颇多&#xff0c;或者完全超出我们的控制&#xff0c;因而在短期内不可能做到。 假设我们已经拥有尽可能…

图片转文字的软件,分享3种不同的类型的软件!

在信息爆炸的时代&#xff0c;图片作为一种直观、生动的信息载体&#xff0c;已经成为我们日常生活中不可或缺的一部分。然而&#xff0c;有时候我们可能需要将图片中的文字提取出来&#xff0c;以便于编辑、整理或进一步使用。那么&#xff0c;有哪些实用的图片转文字软件可以…

2718. 查询后矩阵的和

题目描述&#xff1a; 给你一个整数 n 和一个下标从 0 开始的 二维数组 queries &#xff0c;其中 queries[i] [typei, indexi, vali] 。 一开始&#xff0c;给你一个下标从 0 开始的 n x n 矩阵&#xff0c;所有元素均为 0 。每一个查询&#xff0c;你需要执行以下操作之一…

Java-数据结构基础

栈结构 : 先进后出 队列结构 : 先进先出 数组结构 : 查询快 , 增删慢 链表结构 : 查询慢 , 增删快 二叉树 二叉树 : 每个节点最多有两个子节点 二茬查找树 : 每个节点的左子节点比当前节点小 , 右子节点比当前节点大 二茬平衡树 : 在查找树的基础上, 每个节点左右子树的高…

Django ORM中的Q对象

Q 对象在 Django ORM 中用于构建复杂的查询条件&#xff0c;特别是当你需要使用逻辑运算符&#xff08;如 AND、OR、NOT&#xff09;时。以下是一些使用 Q 对象进行复杂查询的实际例子。 Q对象使用 模型 假设我们有一个包含员工信息的模型 Employee&#xff1a; from djang…

一个引发openssl崩溃问题案例

1 背景 最近用libevent写了一个https代理功能&#xff0c;在调研的时候&#xff0c;遇到了一个项目用到了本地多个openssl库引发的ssl握手崩溃问题。 2 开发环境 项目库版本号依赖项libeventlibevent-2.1.8-stableopenssl 1.1openssl1.0u / 1.1.1w / 3.3.1...... 3 问题现象…

Python酷库之旅-第三方库Pandas(024)

目录 一、用法精讲 61、pandas.to_numeric函数 61-1、语法 61-2、参数 61-3、功能 61-4、返回值 61-5、说明 61-6、用法 61-6-1、数据准备 61-6-2、代码示例 61-6-3、结果输出 62、pandas.to_datetime函数 62-1、语法 62-2、参数 62-3、功能 62-4、返回值 62-…

关于SQLException: Illegal mix of collations (`utf8mb4_general_ci,IMPLICIT`)...错误

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、报错信息三、最后 开篇说明 记录一个查询错误 场景&#xff1a;数据库之间某表复…