Trung tâm cá nhân
sách gpt4 ai đã đi

Hongmeng Development-Support xuất, tùy chỉnh phong cách AttributeModifier được sử dụng trên các tập tin

In lại 作者：撒哈拉 更新时间：2025-02-11 11:16:04 58 4
mua khóa gpt4 Nike

我们在自定义组件的时候，无论是用 @Styles 还是 @Extend，都很难真正做到独立的封装样式，因为这两者都不支持导出，不可以跨文件调用 。

这篇文章主要介绍一个接口 AttributeModifier，它很好的解决了这些弊端，可以实现样式的集中管理和复用，支持跨文件调用封装好的样式类 。

AttributeModifier

使用介绍

AttributeModifier 是一个接口，我们需要实现其中的一个方法 apply<状态名称>Attribute，来实现不同的场景 。

状态名称分为：默认态（Normal）、按压态（Pressed）、焦点态（Focused）、禁用态（Disabled）、选择态（Selected） 。

如果想设置元素的默认样式，就是 applyNormalAttribute，如果想设置元素的按压场景下的样式，就是 applyPressedAttribute 。

declare interface AttributeModifier { applyNormalAttribute?(instance: T): void; applyPressedAttribute?(instance: T): void; applyFocusedAttribute?(instance: T): void; applyDisabledAttribute?(instance: T): void; applySelectedAttribute?(instance: T): void; }

Ví dụ

文字描述比较抽象，下面举例代码来讲解:

  • 我们可以新建个目录modifier，新建个文件index.ets，封装一个作用于 Button 组件的样式类，给它添加一些样式，如下：
export class ButtonModifier implements AttributeModifier { applyNormalAttribute(instance: ButtonAttribute): void { instance .width(150) .height(50) .fontSize(20) .backgroundColor(Color.Orange) } }
  1. 第一步：用 AttributeModifier 接口定义了一个 ButtonModifier 样式类
  2. 第二步：再实现 applyNormalAttribute 设置默认态样式：包括宽度、高度、字体等
  • 在组件文件中使用
import { ButtonModifier } from './modifier/index' @Entry @Component struct Index { @State buttonModifier: ButtonModifier = new ButtonModifier() build() { Column() { Button('按钮') .attributeModifier(this.buttonModifier) } .width('100%') } }

效果如下:

img.png

这样我们就实现了一个对 Button 组件的样式封装，并且支持导出，跨文件使用 。

支持同时设置多个场景的样式

上面给 Button 组件增加了“默认态”的样式，可以在这基础上继续增加“按压态”的样式，就是按钮按下时的样式，如下:

  • 按钮按下的时候：增加边框，边框颜色等
export class ButtonModifier2 implements AttributeModifier { applyNormalAttribute(instance: ButtonAttribute): void { instance .width(150) .height(80) .fontSize(20) .backgroundColor(Color.Orange) } applyPressedAttribute(instance: ButtonAttribute): void { instance .borderWidth(5) .borderColor(Color.Blue) .borderStyle(BorderStyle.Solid) .backgroundColor('#17A98D') } }
  • 在组件中引用
import { ButtonModifier2 } from './modifier/index' @Entry @Component struct Index { @State buttonModifier: ButtonModifier2 = new ButtonModifier2() build() { Column() { Button('按钮') .attributeModifier(this.buttonModifier) } .width('100%') } }

效果如下:

接口中支持传参和业务逻辑

在 ButtonModifier3 样式类中，定义一个 isClick 变量，来区分按钮是否点击过，然后分别对点击和没有点击的情况下增加样式，如下:

export class ButtonModifier3 implements AttributeModifier { isClick: boolean = false constructor(flag?: boolean) { this.isClick = !!flag } applyNormalAttribute(instance: ButtonAttribute): void { if (this.isClick) { instance.backgroundColor('#707070') } else { instance .borderColor('#707070') .borderWidth(2) .backgroundColor('#17A98D') } } }
  • 在组件中调用
import { ButtonModifier3 } from './modifier/index' @Entry @Component struct Index { @State buttonModifier: ButtonModifier3 = new ButtonModifier3() // @State buttonModifier: ButtonModifier3 = new ButtonModifier3(true) build() { Column() { Button('按钮') .attributeModifier(this.buttonModifier) .onClick(() => { this.buttonModifier.isClick = !this.buttonModifier.isClick }) } .width('100%') } }

效果如下:

Tóm tắt

  • Các biện pháp phòng ngừa

我们在实现 AttributeModifier 接口的实例，T 必须指定为组件对应的 Attribute类型，或者是CommonAttribute，如下:

// 作用于 Button 组件，就要传入 ButtonAttribute export class Modifier1 implements AttributeModifier { applyNormalAttribute?(instance: ButtonAttribute): void; } // 作用于 TextInput 组件，就要传入 TextInputAttribute export class Modifier2 implements AttributeModifier { applyNormalAttribute?(instance: ButtonAttribute): void; }
  • @Style 和 @Extend 和 AttributeModifier 三者对比
能力 @Styles @Extend AttributeModifier
跨文件导出 不支持 不支持 支持
通用属性设置 支持 支持 支持
通用事件设置 支持 支持 部分支持
组件特有属性设置 不支持 支持 部分支持
组件特有事件设置 不支持 支持 部分支持
参数传递 不支持 支持 支持
多态样式 支持 不支持 支持
业务逻辑 不支持 不支持 支持

cuối cùng

如果大家有不理解的地方可以留言，或自行阅读文档 文档地址 。

最后此篇关于鸿蒙开发-支持导出，跨文件使用的自定义样式AttributeModifier的文章就讲到这里了,如果你想了解更多关于鸿蒙开发-支持导出，跨文件使用的自定义样式AttributeModifier的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

58 4 0
Bài viết được đề xuất: Làm thế nào để chọn phiên bản phù hợp với việc triển khai DeepSeek-R1 tại địa phương của bạn? Xem tại đây
Bài viết được đề xuất: 『Chơi với Streamlit』--Quản lý trạng thái phiên
Bài viết được đề xuất: Phản xạ trong Java - Bytecode và Class Loader
Bài viết được đề xuất: EasyExcel điền dữ liệu thông qua mẫu
Sa mạc Sahara
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com