@Extend修饰的内容，加入@Builder运行报错（HarmonyOS 鸿蒙Next）

@Extend修饰的内容，加入@Builder运行报错（HarmonyOS 鸿蒙Next） 在对公共样式进行封装的时候出现了如下问题

正常编译，无法运行

@Entry
@ComponentV2
struct A {
  build() {
    Column(){
        this.InputC()
    }
  }
  [@Builder](/user/Builder)
  InputC(){
      TextInput({ placeholder: '请输入'})
      .StyleBaseInput()
  }
}

[@Extend](/user/Extend)(TextInput) function StyleBaseInput() {
  .background(CusBackground())
  .width('100%')
}

// 背景Builder
[@Builder](/user/Builder)
function CusBackground() {
  RelativeContainer() {
    Line()
      .width('100%')
      .height(1)
      .backgroundColor(Color.Gray)
      .alignRules({
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
  }
  .backgroundColor(Color.White)
  .height('100%')
}

用上面的代码能够正常编译，但实际运行的时候会报错，提示：

Error message:Cannot read property observeComponentCreation2 of undefined

不知道具体原因

正常编译，正常运行

将CusBackground不通过[@Extend](/user/Extend)封装，直接赋值给TextInput，表现正常。代码如下：

@Entry
@ComponentV2
struct A {
  build() {
    Column(){
        this.InputC()
    }
  }
  [@Builder](/user/Builder)
  InputC(){
      TextInput({ placeholder: '请输入'})
      .background(CusBackground())
      .StyleBaseInput()
  }
}

[@Extend](/user/Extend)(TextInput) function StyleBaseInput() {
  //.background(CusBackground())
  .width('100%')
}

// 背景Builder
[@Builder](/user/Builder)
function CusBackground() {
  RelativeContainer() {
    Line()
      .width('100%')
      .height(1)
      .backgroundColor(Color.Gray)
      .alignRules({
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
  }
  .backgroundColor(Color.White)
  .height('100%')
}

这是为什么呢？.background又需要传入自定义组件，这将导致无法对background进行封装了。

运行环境：mate 60，编译版本："compatibleSdkVersion": '5.0.0(12)',


更多关于@Extend修饰的内容，加入@Builder运行报错（HarmonyOS 鸿蒙Next）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

【HarmonyOS NEXT】鸿蒙应用设置控件通用样式AttributeModifier，@Styles_鸿蒙attributemodifier-CSDN博客

换个方式实现把。

更多关于@Extend修饰的内容，加入@Builder运行报错（HarmonyOS 鸿蒙Next）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


styles可以 extend不行

有点强迫症犯了，

把上述代码（写法一）改成下面箭头函数的方式（写法二）试试：

@Extend(TextInput) function StyleBaseInput() {
  .background(() => {
    CusBackground()
  })
  .width('100%')
}

因为按写法一，this指向的是StyleBaseInput这个function的上下文，在运行时找不到这个CusBackground的builder；按写法二，this指向的是全局this，可以找到全局定义的CusBackground builder

不支持

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

是不是要提个issue给官方？(/捂脸)

在HarmonyOS鸿蒙Next中，@Extend和@Builder是两种不同的装饰器，分别用于扩展样式和构建UI组件。@Extend用于扩展已有的组件样式，而@Builder用于定义可复用的UI构建逻辑。当你在@Extend修饰的内容中加入@Builder时，可能会遇到报错，主要是因为两者的使用场景和语法规则不同。

@Extend通常用于直接扩展组件的样式属性，而@Builder则用于定义复杂的UI构建逻辑。如果你在@Extend中直接使用@Builder，可能会导致语法冲突或不兼容。正确的做法是将@Builder定义在@Extend之外，然后在@Extend中调用@Builder返回的组件。

例如，错误的使用方式可能是：

@Extend(Text)
function myStyle() {
    @Builder
    function myBuilder() {
        // 构建逻辑
    }
    .myBuilder()
}

正确的方式应该是：

@Builder
function myBuilder() {
    // 构建逻辑
}

@Extend(Text)
function myStyle() {
    .myBuilder()
}

总结来说，@Extend和@Builder的使用需要遵循各自的语法规则，避免直接嵌套使用，以确保代码的正确性和可维护性。

回到顶部