目录
一、探索 ArkUI 的奇妙世界
二、build () 函数：自定义组件的基石
三、通用样式的定义与实现
（一）@Styles 装饰器的运用
（二）样式的复用与传递
四、实际案例剖析
（一）电商 APP 界面组件样式定制
（二）社交 APP 聊天界面组件样式优化
五、注意事项与常见问题解决
（一）注意事项
（二）常见问题解决
六、展望与拓展
一、探索 ArkUI 的奇妙世界
在鸿蒙开发的广袤天地中，ArkUI 无疑是一颗璀璨的明星，作为鸿蒙系统应用界面的 UI 开发框架，它为开发者打造出了一个充满无限可能的创作空间。从基础组件到容器组件，从多样化的布局方式到强大的动画机制，ArkUI 以其简洁自然的 UI 信息语法、多维的状态管理以及实时界面预览等卓越能力，成为了构建分布式应用的得力助手，极大地提升了开发者的应用开发效率，更为用户带来了生动流畅的使用体验。
在众多让 ArkUI 大放异彩的特性中，自定义组件通用样式是尤为重要的一项。它就像是一位神奇的魔法师，赋予了开发者对组件样式进行统一控制和灵活定制的超能力。在大型应用开发的复杂版图里，复用性和可维护性是决定项目成败的关键因素。自定义组件通用样式能够将常用的 UI 元素或功能逻辑巧妙封装，形成一个个独立且可复用的模块。当我们在不同页面需要展示相同样式的按钮、卡片或者其他组件时，只需引用这个自定义组件，无需重复编写繁琐的代码，不仅大大提高了开发效率，还能确保整个应用的风格一致性。
想象一下，在一个电商应用中，商品列表项的展示在多个页面都有出现，包括商品搜索结果页、分类商品列表页等。通过将商品列表项封装成一个自定义组件，并利用自定义组件通用样式来统一设置背景颜色、文字大小、间距等样式，我们可以在不同页面轻松复用这个组件。并且当需要调整商品列表项的样式或交互逻辑时，只需要在自定义组件中进行一次修改，所有引用该组件的页面都会自动更新，有效降低了维护成本，让开发工作变得更加高效和轻松。
二、build () 函数：自定义组件的基石
在自定义组件的构建过程中，build () 函数占据着无可替代的核心地位，堪称自定义组件的基石。它就像是一位精心的设计师，负责定义组件的声明式 UI 描述，详细勾勒出组件的 UI 布局和内容。可以说，每个自定义组件都必须实现 build () 函数，它是组件展示在用户面前的关键步骤。
从功能上看，build () 函数就像是一个 “魔法工厂”，当组件被创建或者组件内状态变量发生更新时，它就会被系统自动调用，根据其中定义的 UI 描述重新构建组件的界面，实现 UI 的实时刷新，让用户能够看到最新的界面状态 。比如在一个新闻应用中，新闻列表项组件里的点赞数、评论数等状态变量发生变化时，build () 函数会及时响应，更新 UI 上显示的点赞数和评论数，让用户第一时间获取到最新的数据。
下面通过一个简单的代码示例来直观感受 build () 函数的基础用法：
@Component
struct MyButton {
@State text: string = "点击我";
build() {
Button(this.text)
.width(120)
.height(40)
.backgroundColor(Color.Blue)
.fontColor(Color.White)
.onClick(() => {
this.text = "已点击";
});
}
}
@Entry
@Component
struct Main {
build() {
Column() {
MyButton();
}.width('100%').height('100%');
}
}
在这个例子中，我们定义了一个自定义组件 MyButton。在 MyButton 组件中，首先使用 @State 装饰器声明了一个状态变量 text，初始值为 “点击我”。然后在 build () 函数中，创建了一个 Button 组件，并通过链式调用设置了它的宽度、高度、背景颜色、字体颜色等样式属性，还为其添加了点击事件处理函数。当按钮被点击时，状态变量 text 的值会被更新为 “已点击”，由于状态变量的变化，build () 函数会被自动调用，重新构建 Button 组件的 UI，将按钮上的文本更新为 “已点击” 。而在 Main 组件中，我们通过 Column 容器组件引用了 MyButton 组件，将其展示在页面上。通过这个简单的示例，我们可以清晰地看到 build () 函数是如何定义自定义组件的 UI 结构，以及如何通过状态变量的变化驱动 UI 更新的 。
三、通用样式的定义与实现
（一）@Styles 装饰器的运用
在 ArkUI 中，@Styles 装饰器是实现自定义组件通用样式的得力助手。它的主要功能是将多条样式设置提炼成一个方法，这样在组件声明的位置可以直接调用，大大提高了样式设置的效率和代码的简洁性 。
@Styles 装饰器的使用方式较为灵活，既可以在组件内定义，也能在全局定义。当在全局定义时，需要在方法名前面添加 function 关键字，例如：
// 全局定义
@Styles function globalCommonStyle() {
.width(100)
.height(50)
.backgroundColor(Color.Gray)
}
而在组件内定义时，则不需要添加 function 关键字，如下所示：
@Component
struct MyComponent {
@State bgColor: ResourceColor = Color.Yellow;
@Styles commonStyle() {
.width(120)
.height(60)
.backgroundColor(this.bgColor)
}
build() {
Column() {
Button('按钮').commonStyle();
}
}
}
这里需要注意的是，@Styles 目前仅支持通用属性和通用事件，并且 @Styles 方法不支持参数。同时，其定义的样式只能在当前文件内使用，不支持 export 。
组件内定义的 @Styles 和全局定义的 @Styles 在优先级上存在差异。当组件使用 @Styles 定义的样式时，框架会优先查找当前组件内的 @Styles，如果找不到，才会去全局查找 。通过下面这个示例可以更直观地看到这种优先级差异：
// 全局定义
@Styles function globalFancy() {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}
@Entry
@Component
struct FancyUse {
@State heightValue: number = 100;
// 组件内定义
@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);
}
}
}
在上述代码中，Text ('FancyA') 使用了全局定义的 globalFancy 样式，而 Text ('FancyB') 使用了组件内定义的 fancy 样式。由于组件内 @Styles 的优先级高于全局 @Styles，所以 FancyB 会显示为组件内定义的样式，即黄色背景、宽度为 200；而 FancyA 会显示为全局定义的样式，即粉色背景、宽度为 150 。
（二）样式的复用与传递
借助 @Styles 装饰器定义好通用样式后，在不同组件中复用这些样式就变得轻而易举。例如，我们在一个电商应用中定义了商品卡片的通用样式：
// 全局定义商品卡片通用样式
@Styles function productCardStyle() {
.width('90%')
.height(200)
.backgroundColor(Color.White)
.borderRadius(10)
.shadow({ color: Color.Gray, radius: 5 })
}
然后在不同的商品展示组件中，都可以轻松复用这个样式：
@Component
struct ProductItem1 {
build() {
Column() {
// 复用商品卡片通用样式
Image($r('app.media.product1')).productCardStyle();
Text('商品名称1').fontSize(16).margin({ top: 10 });
}
}
}
@Component
struct ProductItem2 {
build() {
Column() {
// 复用商品卡片通用样式
Image($r('app.media.product2')).productCardStyle();
Text('商品名称2').fontSize(16).margin({ top: 10 });
}
}
}
这样，无论是 ProductItem1 还是 ProductItem2，它们所展示的商品卡片都具有统一的样式风格，并且当我们需要修改商品卡片的样式时，只需要在 productCardStyle 这个通用样式定义处进行修改，所有引用该样式的组件都会自动更新 。
虽然 @Styles 方法本身不支持参数传递，但我们可以通过一些巧妙的方式来实现样式的定制化。比如利用组件内的状态变量来间接实现样式的变化。假设我们有一个按钮组件，希望根据按钮的点击状态来改变其背景颜色，代码可以这样写：
@Component
struct CustomButton {
@State isClicked: boolean = false;
@Styles buttonStyle() {
.width(120)
.height(40)
.backgroundColor(this.isClicked ? Color.Green : Color.Blue)
.fontColor(Color.White)
.onClick(() => {
this.isClicked = !this.isClicked;
});
}
build() {
Column() {
Button('点击我').buttonStyle();
}
}
}
在这个例子中，通过 @State 修饰的 isClicked 状态变量，在 buttonStyle 样式定义中根据 isClicked 的值来动态设置按钮的背景颜色。当按钮被点击时，isClicked 的值会发生变化，从而导致 buttonStyle 中的样式也相应改变，实现了样式的定制化效果 。这种方式充分展示了 ArkUI 中自定义组件通用样式的灵活性和便利性，能够满足各种复杂的业务需求。
四、实际案例剖析
（一）电商 APP 界面组件样式定制
在电商 APP 的开发中，商品列表和详情页是用户频繁交互的核心界面，其组件样式的设计直接影响着用户的购物体验。以一款知名电商 APP 为例，在商品列表页面，每个商品项都被封装成了一个自定义组件，借助 build () 函数来精心构建其 UI 结构。
@Component
struct ProductItem {
@State product: Product;
build() {
Row() {
Image(this.product.imgSrc)
.width(80)
.height(80)
.objectFit(ImageFit.Cover);
Column() {
Text(this.product.title)
.fontSize(16)
.fontWeight(FontWeight.Bold);
Text(this.product.price.toString())
.fontSize(14)
.fontColor(Color.Gray);
}
}
}
}
在上述代码中，ProductItem 组件通过 @State 修饰符接收一个 Product 类型的状态变量 product，用于存储商品的相关信息，如图片路径 imgSrc、标题 title 和价格 price 等 。在 build () 函数里，使用 Row 布局组件将商品图片和文字信息进行水平排列，图片通过 Image 组件展示，并设置了宽度、高度和图片填充模式；文字信息则通过 Column 布局组件进行垂直排列，包含商品标题和价格，分别设置了不同的字体大小和颜色 。
为了实现商品列表和详情页组件的统一且个性化的界面设计，还定义了一系列通用样式。比如，在商品卡片的样式设置上，利用 @Styles 装饰器定义了通用的商品卡片样式：
@Styles function productCardCommonStyle() {
.width('90%')
.backgroundColor(Color.White)
.borderRadius(10)
.shadow({ color: Color.Gray, radius: 5 })
.padding(10);
}
然后在 ProductItem 组件中复用这个通用样式：
@Component
struct ProductItem {
@State product: Product;
build() {
Row()
.productCardCommonStyle() {
Image(this.product.imgSrc)
.width(80)
.height(80)
.objectFit(ImageFit.Cover);
Column() {
Text(this.product.title)
.fontSize(16)
.fontWeight(FontWeight.Bold);
Text(this.product.price.toString())
.fontSize(14)
.fontColor(Color.Gray);
}
}
}
}
这样，所有的商品列表项都具有统一的背景颜色、圆角、阴影和内边距等样式 。当需要修改商品卡片的整体风格时，只需要在 productCardCommonStyle 通用样式定义处进行调整，所有商品列表项的样式都会随之更新 。在商品详情页，同样可以复用这些通用样式，保持整个电商 APP 界面风格的一致性，同时也提高了开发效率和代码的可维护性 。
（二）社交 APP 聊天界面组件样式优化
社交 APP 的聊天界面是用户沟通交流的主要场所，界面的视觉效果和交互体验至关重要。以一款热门社交 APP 为例，在聊天界面中，消息气泡和头像等组件都通过自定义组件和通用样式进行了精心设计和优化 。
先看消息气泡组件的实现。为了区分发送和接收的消息，分别定义了两个自定义组件：SentBubble 和 ReceivedBubble 。
@Component
struct SentBubble {
@State message: string;
build() {
Column() {
Text(this.message)
.backgroundColor(Color.LightBlue)
.padding(10)
.fontSize(16)
.borderRadius(15)
.alignSelf(Align.End);
}
}
}
@Component
struct ReceivedBubble {
@State message: string;
build() {
Column() {
Row() {
Image($r('app.media.user_avatar'))
.width(40)
.height(40)
.objectFit(ImageFit.Cover)
.marginEnd(10);
Text(this.message)
.backgroundColor(Color.LightGray)
.padding(10)
.fontSize(16)
.borderRadius(15);
}
}
}
}
在 SentBubble 组件中，通过 @State 修饰符接收消息内容 message，使用 Column 布局组件将消息文本进行垂直排列，并设置了背景颜色、内边距、字体大小、圆角和对齐方式等样式，使其显示在右侧，代表发送的消息 。而在 ReceivedBubble 组件中，同样接收消息内容 message，使用 Row 布局组件将头像和消息文本进行水平排列，头像通过 Image 组件展示，设置了大小和图片填充模式，消息文本设置了相应的背景颜色、内边距、字体大小和圆角等样式，显示在左侧，代表接收的消息 。
为了进一步优化聊天界面的视觉效果，还可以定义一些通用样式。比如，定义一个通用的消息气泡文本样式：
@Styles function messageTextStyle() {
.fontSize(16)
.fontColor(Color.Black);
}
然后在 SentBubble 和 ReceivedBubble 组件中复用这个样式：
@Component
struct SentBubble {
@State message: string;
build() {
Column() {
Text(this.message)
.messageTextStyle()
.backgroundColor(Color.LightBlue)
.padding(10)
.borderRadius(15)
.alignSelf(Align.End);
}
}
}
@Component
struct ReceivedBubble {
@State message: string;
build() {
Column() {
Row() {
Image($r('app.media.user_avatar'))
.width(40)
.height(40)
.objectFit(ImageFit.Cover)
.marginEnd(10);
Text(this.message)
.messageTextStyle()
.backgroundColor(Color.LightGray)
.padding(10)
.fontSize(16)
.borderRadius(15);
}
}
}
}
这样，无论是发送还是接收的消息气泡文本，都具有统一的字体大小和颜色 。通过这种方式，不仅提升了聊天界面的视觉效果，还增强了用户的交互体验，让用户在聊天过程中感受到更加舒适和便捷的沟通环境 。
五、注意事项与常见问题解决
在使用 build () 函数和自定义组件通用样式时，有一些注意事项需要我们特别关注，同时，也可能会遇到一些常见问题，下面我们来逐一探讨。
（一）注意事项
避免样式冲突：在定义通用样式和组件内样式时，要注意避免样式冲突。特别是当多个组件使用相同的样式属性时，如果没有合理规划，可能会导致意想不到的显示效果 。比如，在一个页面中，同时存在商品列表组件和导航栏组件，它们都设置了背景颜色的通用样式，如果不小心将两个通用样式中的背景颜色设置为不同的值，且在组件使用时没有正确覆盖，就可能出现页面显示不协调的情况 。为了避免这种情况，我们在定义样式时，要尽量使用有意义的样式名称，明确每个样式的作用范围，并且在组件使用样式时，仔细检查是否符合预期效果 。
合理设置优先级：了解不同样式定义的优先级关系非常重要。如前文所述，组件内定义的 @Styles 优先级高于全局定义的 @Styles 。此外，直接在组件上设置的样式属性优先级通常高于通过 @Styles 装饰器定义的样式 。例如，在一个按钮组件中，既使用了 @Styles 定义的通用样式，又直接在 Button 组件上设置了背景颜色属性，那么直接设置的背景颜色属性会覆盖 @Styles 中定义的背景颜色样式 。在实际开发中，我们要根据具体需求合理利用这种优先级关系，确保样式的正确应用 。
状态变量的管理：在 build () 函数中，状态变量的管理至关重要。由于状态变量的变化会触发 build () 函数的重新调用，进而导致 UI 的更新，所以我们要谨慎处理状态变量的更新逻辑 。避免在不必要的情况下频繁更新状态变量，以免造成性能浪费 。比如，在一个列表组件中，如果列表项的某个属性在短时间内频繁变化，而这个变化对用户体验并没有明显影响，我们可以考虑合并这些变化，或者设置一个合理的更新阈值，减少 build () 函数的调用次数 。同时，也要注意状态变量的初始值设置，确保组件在初始加载时能够正确显示 。
（二）常见问题解决
样式不生效：有时会遇到定义的样式在组件上不生效的情况。这可能是由于样式定义错误、优先级设置不当或者组件本身的特性导致的 。首先，检查样式定义是否正确，语法是否符合 ArkUI 的规范，例如属性名称是否拼写错误、属性值是否合法等 。其次，确认样式的优先级，查看是否有其他更高优先级的样式覆盖了当前样式 。如果是组件本身的特性问题，比如某些组件对特定样式属性有限制，需要查阅官方文档了解相关说明 。例如，在一个 Image 组件中设置了自定义的边框样式但不生效，经过检查发现是因为 Image 组件本身不支持直接设置边框样式，需要通过其他方式（如使用容器组件包裹并设置容器组件的边框样式）来实现类似效果 。
build () 函数调用异常：在开发过程中，可能会遇到 build () 函数调用异常的情况，比如 build () 函数没有按照预期被调用，或者在调用过程中出现错误 。如果 build () 函数没有被调用，首先检查状态变量是否正确声明和使用，是否有其他逻辑阻止了状态变量的变化 。例如，在一个开关组件中，点击开关时状态变量应该改变从而触发 build () 函数更新 UI，但实际没有反应，经过排查发现是点击事件处理函数中的逻辑错误，导致状态变量没有被正确更新 。如果 build () 函数在调用过程中出现错误，查看控制台输出的错误信息，根据错误提示定位问题所在 。可能是 UI 描述语句中的语法错误、组件引用错误或者数据类型不匹配等原因导致的 。比如，在 build () 函数中使用了一个未定义的组件，或者在设置组件属性时传递了错误的数据类型，都会导致 build () 函数调用失败 。
六、展望与拓展
随着鸿蒙生态的蓬勃发展，ArkUI 也在不断演进和完善，未来在自定义组件样式方面有望带来更多令人期待的创新和突破。例如，可能会进一步优化样式定义的语法和机制，使其更加简洁高效，同时增强对复杂样式场景的支持，如实现更灵活的响应式样式布局，以适应不同设备屏幕尺寸和分辨率的需求。
对于读者而言，深入探索 ArkUI 的自定义组件通用样式只是踏入鸿蒙开发世界的一小步。接下来，你可以尝试在实际项目中运用所学知识，不断积累经验 。还可以进一步研究 ArkUI 的其他特性，如组件间的通信机制、状态管理的高级应用等 。同时，关注官方文档的更新和社区的技术分享，与其他开发者交流互动，共同探索 ArkUI 的无限可能，为鸿蒙应用的开发贡献更多精彩创意和优质作品。
暂无评论内容