@Styles和@Extend的区别(鸿蒙开发)

如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。
@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

@Styles

  1. 仅支持通用属性和通用事件,如样式width,heigth
  2. 不支持参数
  3. 可以定义在全局,加function。可以定义在局部,不加function,定义在局部时可以用this访问组件变量

示例代码

// 定义在全局的@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 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

@Extend:定义扩展组件样式

  1. 只支持定义在全局,不可以定义在局部
  2. 支持封装指定组件的私有属性和私有事件和预定义相同组件的@Extend方法
  3. 支持参数包括普通变量,状态变量,函数

示例代码

@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(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}
@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%')
  }
}

公众号持续分享鸿蒙相关技术知识

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

模型 心流

本系列文章 主要是 分享模型,涉及各个领域,重在提升认知。完全投入其中。 1 心流的应用 1.1 优秀运动员的心流体验 迈克尔乔丹(Michael Jordan):篮球之神乔丹在比赛中经常进入心流状态,他曾表示&#xff…

Java_LinkedList链表详解

目录 前言 ArrayList的缺陷 链表 链表的概念及结构 链表的种类 1.单向或双向 2.带头或不带头 3.循环或不循环 LinkedList的使用 什么是LinkedList LinkedList的使用 LinkedList的构造 LinkedList的其他常用方法介绍 LinkedList的遍历 ArrayList和LinkedList的…

1833_emacs_smex的替代品counsel

Grey # :OPTIONS ^:nil emacs smex的替代品counsel 尝试原因 之前使用emacs的生涯中,大部分时间都在使用spacemacs的配置。由于自己对于设计实现的一点好奇,加上spacemacs配置过于庞大,催生了自己维护一套精简够用的配置的想法。这个配置…

Netty源码学习7——netty是如何发送数据的

一丶Write事件的产生和传播 在业务逻辑处理完毕后,需要调用write 或者 writeAndFlush方法 ChannelHandlerContext#write or writeAndFlush方法会从当前 ChannelHandler 开始在 pipeline 中向前传播 write 事件直到 HeadContext。 ChannelHandlerContext.channel()#…

Leetcode100 链表|2. 两数相加160. 相交链表 234. 回文链表

2. 两数相加 题目:给你两个非空的链表,表示两个非负的整数。它们每位数字都是按照逆序的方式存储的,并且每个节点只能存储一位数字。 请你将两个数相加,并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0…

JAVA高级(后端需深入移步)

单元测试:使用Junit单元测试框架 使用Junit单元测试: 通过左侧的对❌来进行提示 Junit框架的常见注解: 反射(用于框架,也是最重要):展示框架的成员信息 由于是用于对象,即使在获取…

【Java期末复习资料】(2)常见例题 //持续更新

本文章主要是常见例题,解析不会太详细,有问题、不会的可以给我发消息哦,后续会出模拟卷 常见例题: 1.下列跟Java技术平台有关的是(ABD) A.JVM B.JDK C.JPN D.JRE 2.面向对象的特征包括(ACD&…

m.2固态硬盘怎么选择?

一、什么是固态硬盘 固态硬盘又称SSD,是Solid State Drive的简称,由于采用了闪存技术,其处理速度远远超过传统的机械硬盘,这主要是因为固态硬盘的数据以电子的方式存储在闪存芯片中,不需要像机械硬盘那样通过磁头读写磁…

五:爬虫-数据解析之xpath解析

三:数据解析之xpath解析 1.xpath介绍: ​ xpath是XML路径语言,它可以用来确定xml文档中的元素位置,通过元素路径来完成对元素的查找,HTML就是XML的一种实现方式,所以xpath是一种非常强大的定位方式​ XPa…

LeetCode5.最长回文子串

昨天和之前打比赛的队友聊天,他说他面百度面到这道算法题,然后他用暴力法解的,面试官让他优化他没优化出来,这道题我之前没写过,我就想看看我能不能用效率高一点的方法把它做出来,我一开始就在想用递归或者…

FreeSSL申请免费域名证书

本文详细讲解如何申请免费证书,需要先准备好域名,将服务器IP和域名绑定。 1、注册FreeSSL账号 网址: https://freessl.org/ 2、申请流程 登录后首页输入域名,然后点击Create certificate,跳转到证书申请页面。 或者…

使用最小花费爬楼梯

1.状态表示 2.状态转移方程 3.初始化 保证填表时, 不越界 4.填表顺序 从左往右 5.返回值 解法2: 1.状态表示 2.状态转移方程 3.初始化 4.填表 从右往左 5.返回值 min( dp[0] , dp[1] ) ----------------------------------------------------…

基于TCP的多路复用

1. 知识点 目前支持I/O多路复用的系统调用有select,pselect,poll,epoll。与多进程和多线程技术相 比,I/O多路复用技术的最大优势是系统开销小,系统不必创建进程/线程,也不必维护这些进 程/线程,…

Spring Boot中的事务是如何实现的?懂吗?

SpringBoot中的事务管理,用得好,能确保数据的一致性和完整性;用得不好,可能会给性能带来不小的影响哦。 基本使用 在SpringBoot中,事务的使用非常简洁。首先,得感谢Spring框架提供的Transactional注解&am…

Proteus仿真--串口发送数据到2片8×8点阵屏滚动显示

本文介绍2片88点阵屏滚动显示设计(完整仿真源文件及代码见文末链接) 仿真图如下 仿真运行视频 Proteus仿真--1602LCD显示电话拨号键盘按键实验(仿真文件程序) 附完整Proteus仿真资料代码资料 链接:https://pan.baidu…

Leetcode每日一题

https://leetcode.cn/problems/binary-tree-preorder-traversal/ 这道题目需要我们自行进行创建一个数组,题目也给出我们需要自己malloc一个数组来存放,这样能达到我们遍历的效果,我们来看看他的接口函数给的是什么。 可以看到的是这个接口函…

qt可以详细写的项目或技术

1.QT 图形视图框架 2.QT 模型视图结构 3.QT列表显示大量信息 4.QT播放器 5.QT 编解码 6.QT opencv

2023北京智慧城市与电气高峰论坛-安科瑞 蒋静

2023年7月27日,北京土木建筑学会电气设计委员会、北京电气设计技术协作及情报交流网联合举办的“北京电气设计第43届年会”在京盛大召开。安科瑞作为企业微电网能效管理平台服务商与广大同仁共聚本次盛会,尽享技术盛宴。 本次会议采用线上线下相结合&…

【C++】:红黑树

朋友们、伙计们,我们又见面了,本期来给大家解读一下有关多态的知识点,如果看完之后对你有一定的启发,那么请留下你的三连,祝大家心想事成! C 语 言 专 栏:C语言:从入门到精通 数据结…

12.视图

目录 1.视图的含义与作用 2.视图的创建与查看 1.创建视图的语法形式 2、查看视图: 1.使用DESCRIBE语句查看视图基本信息 2.使用SHOW TABLE STATUS语查看视图基本信息查看视图的信息 3.使用SHOW CREATE VIEW语查看视图详细信息 4.在views表中查看视图详细信息…