【HarmonyOS 4.0】组件样式复用

2024-08-26 14:52

本文主要是介绍【HarmonyOS 4.0】组件样式复用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  1. 当多个组件具有相同的样式时,为避免重复代码,开发者可使用 @Styles、@Extend() 装饰器将多条样式设置提炼成一个方法,直接在各组件声明的位置进行调用,这样可完成样式的复用。

1. @Styles

  1. 组件内的 @Styles 方法只能在当前组件中使用,全局的 @Styles 方法目前只允许在当前的 .ets 文件中使用。
  2. 组件内定义 @Styles 方法时不需要 function 关键字,全局的 @Styles 方法需要使用 function 关键字。
  3. @Styles 方法中只能包含通用属性方法(width、height、borderRadius)和通用事件方法
  4. @Styles 方法不支持参数。

1.1 组件内定义样式

@Entry
@Component
struct Login {build(){Column() {TextInput().inputStyle()TextInput().inputStyle()}}@Styles inputStyle(){.placeholderColor($r('app.color.placeholder_color')).height($r('app.float.login_input_height')).fontSize($r('app.float.text_input_size')).backgroundColor($r('app.color.text_input_background')).width(CommonConstants.FULL_PARENT).padding({left: CommonConstants.INPUT_PADDING_LEFT}).margin({ top: $r('app.float.input_margin_top') })}
}

1.2 全局定义样式,敲 styles 回车生成代码模版

@Styles function inputStyle(){.placeholderColor($r('app.color.placeholder_color')).height($r('app.float.login_input_height')).fontSize($r('app.float.text_input_size')).backgroundColor($r('app.color.text_input_background')).width(CommonConstants.FULL_PARENT).padding({left: CommonConstants.INPUT_PADDING_LEFT}).margin({ top: $r('app.float.input_margin_top') })
}@Entry
@Component
struct Login {build(){Column() {TextInput().inputStyle()TextInput().inputStyle()}}
}

2. @Extend

  1. @Extend 装饰的方法只能定义在全局,使用范围目前只限于当前的 .ets 文件。
  2. @Extend 方法只能用于指定类型的组件,可以理解为是某组件的扩展样式。
  3. 因此 @Extend 方法中可包含指定组件的专有属性方法专有事件方法
  4. @Extend 方法支持参数。

2.1 敲 exted 回车生成代码模版

@Extend(Button)
function buttonStyle(color: Color) {.width(CommonConstants.FULL_PARENT).height($r('app.float.line_height')).type(ButtonType.Normal).backgroundColor(color)
}build() {Column() {Button('确定').buttonStyle(Color.Green)Button('取消').buttonStyle(Color.Gray)}
}

这篇关于【HarmonyOS 4.0】组件样式复用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108876

相关文章

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的?二、@Spythontate的基本原理1. 依赖关系的收集2.

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

《在SpringBoot中使用异步线程时的HttpServletRequest复用问题记录》文章讨论了在SpringBoot中使用异步线程时,由于HttpServletRequest复用导致... 目录一、问题描述:异步线程操作导致请求复用时 Cookie 解析失败1. 场景背景2. 问题根源二、问题详细分