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

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

4 回复

可参考官网文档进行自定义组件的创建，链接如下：

创建自定义组件-自定义组件-UI范式基本语法-学习ArkTS语言-基础入门 - 华为HarmonyOS开发者

针对您的问题，您可以使用“动态属性设置”来显示在不同页面的同一类型的组件的样式复用。

官网文档链接如下：

动态属性设置-通用属性-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

//demo如下：

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%')
  }
}

更多关于HarmonyOS鸿蒙Next中容器组件如何自定义 / 如何在不同页面复用样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-statestyles-V5#styles%E5%92%8Cstatestyles%E8%81%94%E5%90%88%E4%BD%BF%E7%94%A8

在HarmonyOS鸿蒙Next中，自定义容器组件和在不同页面复用样式可以通过以下方式实现：

自定义容器组件：

  • 使用@Component装饰器定义自定义组件。例如：
@Component
struct CustomContainer {
  build() {
    Column() {
      Text('自定义容器组件')
      // 添加其他子组件
    }
  }
}
  • 在页面中使用该自定义组件：
@Entry
@Component
struct Index {
  build() {
    Column() {
      CustomContainer()
    }
  }
}

在不同页面复用样式：

  • 使用@Styles装饰器定义可复用的样式。例如：
@Styles function commonStyle() {
  .width(200)
  .height(100)
  .backgroundColor(Color.Blue)
}
  • 在多个页面中应用该样式：
@Entry
@Component
struct Page1 {
  build() {
    Column() {
      Text('页面1').commonStyle()
    }
  }
}

@Entry
@Component
struct Page2 {
  build() {
    Column() {
      Text('页面2').commonStyle()
    }
  }
}

通过这些方法，可以在HarmonyOS鸿蒙Next中实现容器组件的自定义和样式的复用。

在HarmonyOS鸿蒙Next中，自定义容器组件可通过@Component装饰器创建，使用@Styles或@Extend装饰器定义样式，并通过@Builder或@Extend在不同页面中复用样式。例如，使用@Styles定义通用样式，然后在多个组件的styles属性中引用，确保样式一致性和复用性。

回到顶部