HarmonyOS 容器组件如何自定义 / 如何在不同页面复用样式

HarmonyOS  容器组件如何自定义 / 如何在不同页面复用样式。

HarmonyOS
2024-09-25 12:18:18
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

可以使用“动态属性设置”来显示在不同页面的同一类型的组件的样式复用。官网文档链接如下:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5#attributemodifier

demo如下:

//创建Button的通用样式  
class MyButtonModifier implements AttributeModifier<ButtonAttribute> {  
  //正常状态下的样式  
  applyNormalAttribute(instance: ButtonAttribute): void {  
    instance.fontSize(50).fontWeight(FontWeight.Bold).backgroundColor(Color.Red).fontColor(Color.Green)  
  }  
}  
  
//创建Text的通用样式  
class MyTextModifier implements AttributeModifier<TextAttribute> {  
  applyNormalAttribute(instance: TextAttribute): void {  
    instance.fontSize(50).fontColor(Color.White).backgroundColor(Color.Blue).borderRadius(10)  
  }  
  
}  
  
@Entry  
@Component  
struct AttributeModifierPage {  
  @State message: string = 'Hello World';  
  buttonModifier:MyButtonModifier = new MyButtonModifier()  
  textModifier:MyTextModifier = new MyTextModifier()  
  
  build() {  
    Column({space:10}) {  
      Button('按钮一')  
        .attributeModifier(this.buttonModifier)  
  
      Button('按钮二')  
        .attributeModifier(this.buttonModifier)  
  
      Text('文本一')  
        .attributeModifier(this.textModifier)  
  
      Text('文本二')  
        .attributeModifier(this.textModifier)  
  
    }.justifyContent(FlexAlign.Center)  
    .height('100%')  
    .width('100%')  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
分享
微博
QQ
微信
回复
2024-09-25 16:52:34
相关问题
ArkTs如何自定义容器组件
4164浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
1234浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
3629浏览 • 1回复 待解决
HarmonyOS 如何自定义 toast 样式
1035浏览 • 1回复 待解决
HarmonyOS 如何自定义Toggle样式
732浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
9847浏览 • 1回复 待解决