随着 HarmonyOS（鸿蒙操作系统）的不断发展，开发者们面临着越来越多的应用场景和技术难题。本文将探讨如何利用 HarmonyOS 提供的特性，特别是 API 11 中的 attributeModifier，以及一些技巧来克服样式抽离和组件状态管理方面的挑战。
一、样式抽离与跨页面复用
在 HarmonyOS 应用开发过程中，开发者常常希望将一些通用样式抽离出来，以便在多个页面间重用。然而，默认情况下，HarmonyOS 提供的 @Styles 并不支持跨页面使用。为了解决这个问题，HarmonyOS API 11 引入了 attributeModifier 特性，允许开发者创建可复用的样式定义。
通过 attributeModifier，开发者可以在一个地方定义一组属性，然后在不同的组件中应用这些属性，从而实现了样式的集中管理和复用。这种方式不仅提高了代码的可维护性，还使得样式修改变得更加简单高效。
src/main/ets/utils/MyStyles.ets
//输入框样式export class MyInputModifier implements AttributeModifier<TextInputAttribute> { inputValue: string = ""
applyNormalAttribute(instance: TextInputAttribute): void { instance.width('524.31lpx') instance.height('70lpx') instance.fontSize('27lpx') instance.backgroundColor("#ffffff")
}}
//搜索栏样式export class MyRowModifier implements AttributeModifier<RowAttribute> { applyNormalAttribute(instance: RowAttribute): void { instance.width('100%') instance.justifyContent(FlexAlign.SpaceBetween) instance.backgroundColor(Color.Gray) instance.padding({ left: '37lpx', top: '11lpx', bottom: '11lpx', right: '15lpx' }) }}
复制代码
src/main/ets/pages/Page135.ets
import { MyInputModifier, MyRowModifier } from '../utils/MyStyles'
@Entry@Componentstruct Page135 { @State myInputModifier: MyInputModifier = new MyInputModifier() @State myRowModifier: MyRowModifier = new MyRowModifier()
build() { Column() { Row() { TextInput({ placeholder: '请输入内容' }).attributeModifier(this.myInputModifier) .onChange((value) => { this.myInputModifier.inputValue = value })
Button('搜索').onClick(() => {
}) }.attributeModifier(this.myRowModifier) } }}
复制代码
注意事项
尽管 attributeModifier 提供了一个强大的工具来管理样式，但在使用时仍需注意一些限制。例如，在定义组件属性时，如 applyNormalAttribute 方法中，不应该尝试实现如 onClick 这样的交互逻辑。如果这样做，可能会遇到“SourceMap is not initialized yet”的错误。
正确的做法是，在组件定义中专注于样式和布局属性的设置，而将事件处理逻辑分离出来，通过其他方式（如组件自身的事件监听器）来实现。
二、TextInput 与 Attribute Modifier 的兼容性
当使用 TextInput 组件与 attributeModifier 结合时，可能会遇到一些意想不到的问题。比如，在某些情况下，输入框的样式可能会发生意料之外的变化。为了防止这种情况的发生，建议从 TextInput 组件中移除 text 属性，并改用 onChange 事件来监听输入变化。
这样做的好处在于，它不仅可以避免因样式冲突导致的问题，还可以确保输入状态的一致性，提供更好的用户体验。
三、组件状态管理与标签设置
对于那些需要在页面之间传递额外信息的应用场景，如设置组件标签（tag），HarmonyOS 并没有像 Android 那样的 setTag 方法。不过，可以利用 AttributeModifier 来封装类似的功能。如果还需要在页面销毁后再恢复上一次的状态，可以考虑使用 static 变量来保存这些信息。
这种方法特别适用于拥有大量输入组件的页面，因为它可以帮助我们跟踪各个组件的状态，从而在用户重新进入页面时能够快速恢复之前的状态。
src/main/ets/util/MyUtils.ets
//输入框样式export class MyInputModifier implements AttributeModifier<TextInputAttribute> { private static oldInputValueMap: Map<string,string> = new Map<string,string>() private inputValue: string = "" private inputName :string = ""
constructor(inputName:string) { this.inputName = inputName if(MyInputModifier.oldInputValueMap[inputName]){ this.inputValue = MyInputModifier.oldInputValueMap[inputName] } }
setInputValue(inputValue: string) { this.inputValue = inputValue MyInputModifier.oldInputValueMap[this.inputName] = inputValue }
getInputValue() { return this.inputValue }
applyNormalAttribute(instance: TextInputAttribute): void { instance.width('524.31lpx') instance.height('70lpx') instance.fontSize('27lpx') instance.backgroundColor("#ffffff")
}}
//搜索栏样式export class MyRowModifier implements AttributeModifier<RowAttribute> { applyNormalAttribute(instance: RowAttribute): void { instance.width('100%') instance.justifyContent(FlexAlign.SpaceBetween) instance.backgroundColor("#ffffff") instance.padding({ left: '37lpx', top: '11lpx', bottom: '11lpx', right: '15lpx' }) }}
复制代码
src/main/ets/pages/Page008.ets
import { MyInputModifier, MyRowModifier } from '../util/MyUtils'import { router } from '@kit.ArkUI'
@Entry@Componentstruct Page008 { @State myInputModifier_1: MyInputModifier = new MyInputModifier("输入框1") @State myInputModifier_2: MyInputModifier = new MyInputModifier("输入框2") @State myRowModifier: MyRowModifier = new MyRowModifier() aboutToAppear(): void { } build() { Column() { Row() { TextInput({ placeholder: '请输入内容', text: this.myInputModifier_1.getInputValue() }) .attributeModifier(this.myInputModifier_1) .onChange((value) => { this.myInputModifier_1.setInputValue(value) }) }.attributeModifier(this.myRowModifier)
Row() { TextInput({ placeholder: '请输入内容', text: this.myInputModifier_2.getInputValue() }) .attributeModifier(this.myInputModifier_2) .onChange((value) => { this.myInputModifier_2.setInputValue(value) }) }.attributeModifier(this.myRowModifier) Button('返回上一页').onClick(()=>{ router.back() }) } }}
复制代码
src/main/ets/pages/Page007.ets
import { router } from '@kit.ArkUI'
@Entry@Componentstruct Page007 {
build() { Row() { Column() { Text("跳转到下一页") .fontSize(50) .fontWeight(FontWeight.Bold) .onClick(()=>{ router.pushUrl({url:'pages/Page008'}) }) } .width('100%') } .height('100%') }
}
复制代码
结论
通过对 HarmonyOS 特性的深入理解和灵活运用，我们可以有效地解决样式抽离、组件状态管理和跨页面复用等常见开发难题。attributeModifier 作为 API 11 中的一个重要特性，为开发者提供了强大的工具来提高代码质量、简化样式管理，并增强用户体验。随着 HarmonyOS 平台的发展，相信会有更多类似的创新技术帮助开发者构建更加优秀且具有竞争力的应用程序。
评论