HarmonyOS 容器组件如何自定义 / 如何在不同页面复用样式-鸿蒙开发者社区-51CTO.COM

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%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-25 16:52:34
相关问题
ArkTs如何自定义容器组件
2972浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
351浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
2273浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
8675浏览 • 1回复 待解决
HarmonyOS 自定义Slider样式
234浏览 • 1回复 待解决
HarmonyOS 如何全局复用样式
262浏览 • 1回复 待解决
如何自定义滚动条的样式
459浏览 • 1回复 待解决
如何在BuildProfile中自定义参数?
172浏览 • 1回复 待解决
HarmonyOS如何自定义组件的Controller?
219浏览 • 1回复 待解决
如何在自定义弹窗中再次弹窗
2142浏览 • 1回复 待解决
HarmonyOS如何手动重置自定义组件
264浏览 • 1回复 待解决
如何自定义组件原型菜单
798浏览 • 1回复 待解决
如何自定义模拟Tabs组件
814浏览 • 1回复 待解决