鸿蒙组件样式复用简介

鸿蒙组件样式复用简介

  • 使用@Style进行复用
  • 在Component内部复用
  • 在Component外部复用
  • 使用@Extend复用指定类型组件
  • @Extend支持参数传递

使用@Style进行复用

在页面开发过程中,会遇到多个组件都在使用相同的样式,这时候就要考虑是不是可以将相同的样式的进行复用。

现在看下如下代码

@Entry
@Component
struct Style {build() {Column({space:20}){Text('Text......').width('60%').height(50).backgroundColor(Color.Red).fontColor(Color.White).fontSize(20).fontWeight(FontWeight.Bold)Button('Button',{type: ButtonType.Capsule}).width('60%').height(50).backgroundColor(Color.Red).fontSize(20).fontWeight(FontWeight.Bold)}.width('80%').height('100%').justifyContent(FlexAlign.Center)}
}

在上面代码中,Text和Button都有相同的样式,我们可以使用@Style对上述代码进行复用。

在Component内部复用

可以将@Style修饰的方法放在build方法后面

@Entry
@Component
struct Style {build() {Column({space:20}){Text('Text......').commenStyle().fontColor(Color.White).fontSize(20).fontWeight(FontWeight.Bold)Button('Button',{type: ButtonType.Capsule}).commenStyle().fontSize(20).fontWeight(FontWeight.Bold)}.width('80%').height('100%').justifyContent(FlexAlign.Center)}@StylescommenStyle(){.width('60%').height(50).backgroundColor(Color.Red)}
}

在使用的时候,直接跟在组件后面。

在Component外部复用

如果页面上定义了多个Component,这个时候复用的样式可以考虑定义在Component外部,这样做的目的是每个Component都能调用复用组件。

@Entry
@Component
struct Style {build() {Column({space:20}){Text('Text......').commenStyleG().fontColor(Color.White).fontSize(20).fontWeight(FontWeight.Bold)Button('Button',{type: ButtonType.Capsule}).commenStyleG().fontSize(20).fontWeight(FontWeight.Bold)}.width('80%').height('100%').justifyContent(FlexAlign.Center)}}@Styles function commenStyleG() {.width('60%').height(50).backgroundColor(Color.Red)
}

**备注:**使用@Style定义的组件,只能接受组件通用信息,通用信息可在API Reference里面的ArkTS处查找;@Style不能接受自定义参数。

请添加图片描述

使用@Extend复用指定类型组件

@Extend跟@Style不同,@Extend只能复用指定类型组件。

先看如下代码

@Entry
@Component
struct Style {build() {Column({space:20}){Button('Button1',{type: ButtonType.Capsule}).width('60%').height(50).backgroundColor(Color.Green).fontSize(20).fontWeight(FontWeight.Bold)Button('Button2',{type: ButtonType.Capsule}).width('60%').height(50).backgroundColor(Color.Red).fontSize(20).fontWeight(FontWeight.Bold)}.width('80%').height('100%').justifyContent(FlexAlign.Center)}
}

在这里插入图片描述

上述代码中存在大量重复代码,并且都是Button这种类型的,有通用也有不是通用的。

此时可以考虑使用@Extend来进行复用

将上述代码简化为如下:

@Entry
@Component
struct Style {build() {Column({space:20}){Button('Button1',{type: ButtonType.Capsule}).buttonStyle()Button('Button2',{type: ButtonType.Capsule}).buttonStyle()}.width('80%').height('100%').justifyContent(FlexAlign.Center)}
}
@Extend(Button) function buttonStyle(){.width('60%').height(50).backgroundColor(Color.Red).fontSize(20).fontWeight(FontWeight.Bold)
}

在这里插入图片描述

使用Extend复用后,发现之前设置的背景色也全部变成一样;这时候,就需要考虑对Extend复用信息进行传参。

@Extend支持参数传递

此处,需要将buttonStyle进行改造。

@Extend(Button) function buttonStyle(color:ResourceColor,height: Length){.width('60%').height(height).backgroundColor(color).fontSize(20).fontWeight(FontWeight.Bold)
}

改造后,可以在使用的时候,传入背景色和高度

@Entry
@Component
struct Style {build() {Column({space:20}){Button('Button1',{type: ButtonType.Capsule}).buttonStyle(Color.Green,70)Button('Button2',{type: ButtonType.Capsule}).buttonStyle(Color.Red,30)}.width('80%').height('100%').justifyContent(FlexAlign.Center)}
}

在这里插入图片描述

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

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

相关文章

【深度优先搜索 图论 树】2872. 可以被 K 整除连通块的最大数目

本文涉及知识点 深度优先搜索 图论 树 图论知识汇总 LeetCode 2872. 可以被 K 整除连通块的最大数目 给你一棵 n 个节点的无向树,节点编号为 0 到 n - 1 。给你整数 n 和一个长度为 n - 1 的二维整数数组 edges ,其中 edges[i] [ai, bi] 表示树中节点…

VMware 虚拟机打开一段时间后卡死,VNX进程CPU占比高

一、问题描述 打开虚拟机后可以正常运行 运行几分钟后突然卡死 然后通过任务管理器可以观察到VMware Workstation VMX应用进程的CPU占比高,CPU也出现异常 关闭虚拟机重新开启,还是一样卡死 二、系统环境 系统: Windows10 VMware: Workstation 17 Pro …

奇门辅助软件v2024.5

废话不说,先上链接 链接:https://pan.baidu.com/s/1_i11lMx4P_vrTs-6lpWoHA?pwd8v1m 提取码:8v1m 功能介绍 【宫内信息】是点击宫内某属性时显示的宫内基本信息。 【古籍宝鉴】是《御定奇门宝鉴》里的对应时局内容,但差补法置…

GPT:利用LLM Studio在本地运行语言模型

请关注微信公众号:拾荒的小海螺 博客地址:http://lsk-ww.cn/ 1、简述 随着人工智能和自然语言处理技术的发展,语言模型技术正逐渐成为博客和内容创作领域的重要工具。LLM Studio是一种允许用户在本地环境中运行语言模型的工具,它…

备考2024年小学生古诗文大会:吃透10道历年真题和知识点(持续)

对上海小学生的小升初和各种评优争章来说,语文、数学、英语的含金量较高的证书还是很有价值和帮助的。对于语文类的竞赛,小学生古诗文大会和汉字小达人通常是必不可少的,因为这两个针对性强,而且具有很强的上海本地特色。 今天我…

C语言 | Leetcode C语言题解之第69题x的平方根

题目&#xff1a; 题解&#xff1a; int mySqrt(int x) {long int i 0;for(i0;;i){long int a i*i;long int b (i1)*(i1);if(a < x&&b > x){break;}}return i; }

【第三版 系统集成项目管理工程师】第2章 信息技术发展(知识总结)

持续更新。。。。。。。。。。。。。。。 【第2章】 信息技术发展 考情分析2. 1信息技术及其发展2.1.1 计算机软硬件-P501.计算机硬件2.计算机软件-P51 2.1.2计算机网络1.通信基础-P522.网络基础-P534.网络标准协议-P543.网络设备-P535.软件定义网络-P576.第五代移动通信技术-P…

【C++题解】1434. 数池塘(四方向)

问题&#xff1a;1434. 数池塘&#xff08;四方向&#xff09; 类型&#xff1a;深搜 题目描述&#xff1a; 农夫约翰的农场可以表示成 NM个方格组成的矩形。由于近日的降雨&#xff0c;在约翰农场上的不同地方形成了池塘。每一个方格或者有积水&#xff08;W&#xff09;或者…

项目管理-项目沟通管理

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 1.项目沟通管理-主要内容 项目沟通管理过程--重点&#xff1a; ①ITTO 输入&#xff0c;输出工具和技术。 ②问题和解决方案。 ③论文…

手机异地组网方案?

现代社会&#xff0c;随着信息技术的快速发展&#xff0c;人们之间的通信需求也日益增加。尤其是在异地工作、异地学习、异地旅游等情况下&#xff0c;我们需要实现不同地区间的快速组建局域网&#xff0c;以解决电脑与电脑、设备与设备、电脑与设备之间的信息远程通信问题。本…

【Linux】基于 Jenkins+shell 实现更新服务所需文件 -->两种方式:ssh/Ansible

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

MySQL——Windows平台下MySQL安装与配置(一)MySQL安装

Windows平台下安装和配置 基于Windows平台的MySQL安装文件有两个版本&#xff0c;一种是以.msi作为后缀名的二进制分发版&#xff0c;一种是以.zip作为后缀的压缩文件。其中.msi的安装文件提供了图形化的安装向导&#xff0c;按照向导提示进行操作即可安装完成&#xff0c;.zip…

力扣:64. 最小路径和

64. 最小路径和 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 说明&#xff1a;每次只能向下或者向右移动一步。 示例 1&#xff1a; 输入&#xff1a;grid [[1,3,1],[1,5,1],[4,2,1]] 输…

【C语言】解决不同场景字符串问题:巧妙运用字符串函数

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、字符函数1.1 字符分类函数1.1.1 islower1.1.2 isupper 1.…

哪个品牌的骨传导耳机好用?精选五大高性能热门骨传导耳机款式推荐!

我作为一名热衷于音乐的数码博主&#xff0c;在选购产品前也习惯于先浏览各种榜单。最近&#xff0c;我发现关于骨传导耳机的讨论热度极高&#xff0c;有人认为骨传导耳机是非常值得入手的新型蓝牙耳机&#xff0c;也有人认为骨传导耳机只是智商税的产品。经过深入调查后&#…

jetbra.zip教程 激活JetBrains全家桶Idea、pyCharm…亲测有效

本教程基于Windows系统 1、下载jetbra.zip 1.1、地址&#xff1a;https://3.jetbra.in/ 1.2、点击随便一个可用站点 1.3、找到左上角蓝色部分&#xff0c;点击下载 1.4、注意软件卡片上右上角支持的版本 1.5、不要关闭网页&#xff0c;留着&#xff0c;要等会用到 2、下载对应…

器件配置比特流或 PDI 设置-7 系列比特流设置

7 系列比特流设置 下表所示 7 系列器件的器件配置设置可搭配 set_property <Setting> <Value> [current_design] Vivado 工具 Tcl 命令一起使用。 注释 &#xff1a; BPI 的比特流设置对于 Spartan -7 器件无效。

自定义数据上的YOLOv9分割训练

原文地址&#xff1a;yolov9-segmentation-training-on-custom-data 2024 年 4 月 16 日 在飞速发展的计算机视觉领域&#xff0c;物体分割在从图像中提取有意义的信息方面起着举足轻重的作用。在众多分割算法中&#xff0c;YOLOv9 是一种稳健且适应性强的解决方案&#xff0…

c++ BSTree二叉搜索树(附原码)

目录 一、概念 二、基本操作 1、插入 2、中序遍历 3、删除 4、查找 5、总结删除 三、应用场景 四、原码 一、概念 左子树比根小&#xff0c;右子树比根大 意义&#xff1a;最多查找高度次数 不需要排序&#xff0c;就达到了二分查找的效率 同时还弥补了单纯数组的插入…

自适应调节Q和R的自适应UKF(AUKF_QR)的MATLAB程序

简述 基于三维模型的UKF&#xff0c;设计一段时间的输入状态误差较大&#xff0c;此时通过对比预测的状态值与观测值的残差&#xff0c;在相应的情况下自适应调节系统协方差Q和观测协方差R&#xff0c;构成自适应无迹卡尔曼滤波&#xff08;AUKF&#xff09;&#xff0c;与传统…