HarmonyOS 鸿蒙Next 子组件被父组件包装后，如何通过父组件设置子组件的属性

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 子组件被父组件包装后，如何通过父组件设置子组件的属性

一个自定义组件中，封装了一个textInput组件，由于textInput组件属性太多，父组件若一个一个重写textInput的属性显的过于麻烦，是否有什么简便的方法，即不用在父组件中重写textInput的属性，同时可以在父组件使用时，直接用链式调用子组件进行相关设置

Harmonyos Next教程
3 回复

如果是想对系统组件进行封装，可以参考： 组件封装开发实践-UI框架-应用框架开发-功能开发-最佳实践 - 华为HarmonyOS开发者

该文档中详细介绍了如何对ArkUI组件进行自定义封装，不过目前ArkUI并不支持自定义组件链式调用，我们提供以下样例作为链式调用的替代方案，样例代码如下:

Index.ets:

import CustomSysComp, { MyTextInputModifier } from './CustomSysComp'

@Entry

@Component

struct Index {

  @Styles pressedStyles() {

    .backgroundColor(Color.Blue)

  }

  build() {

    Column() {

      CustomSysComp({

        textInputModifier: new MyTextInputModifier()

          .backgroundColor(Color.Blue)

          .placeholderColor(Color.Red)

      })

        .width("100%")

        .height(400)

    }

    .width('100%')

    .width('100%')

  }

}
CustomSysComp.ets:

@Component

struct CustomSysComp {

  // 设置自定义TextInput

  textInputModifier: MyTextInputModifier = new MyTextInputModifier()

  build() {

    Column() {

      TextInput({placeholder: "placeholder"})

        .attributeModifier(this.textInputModifier)

      Button("button")

    }

    .width("100%")

    .height("100%")

  }

}

// 提供方创建自定类Class类，实现系统AttributeModifier接口

export class MyTextInputModifier implements AttributeModifier<TextInputAttribute> {

  // 默认属性

  private mWidth: Length = '100%'

  private mHeight: Length = 100

  // 定制属性

  private mPlaceholderColor: ResourceColor = Color.Gray

  placeholderColor(placeholderColor: ResourceColor): MyTextInputModifier {

    this.mPlaceholderColor = placeholderColor

    return this

  }

  private mBackgroundColor: ResourceColor = Color.Orange

  backgroundColor(backgroundColor: ResourceColor): MyTextInputModifier {

    this.mBackgroundColor = backgroundColor

    return this

  }

  applyNormalAttribute(instance: TextInputAttribute): void {

    instance.width(this.mWidth)

    instance.height(this.mHeight)

    instance.placeholderColor(this.mPlaceholderColor)

    instance.backgroundColor(this.mBackgroundColor)

  }

}

export default CustomSysComp

更多关于HarmonyOS 鸿蒙Next 子组件被父组件包装后，如何通过父组件设置子组件的属性的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你想的这种简便的，现在看来应该是没有的。

如果只是链式调用，那直接定义 class 然后用Java Builder 构建一下方法。应该也可以

在HarmonyOS鸿蒙系统中，当子组件被父组件包装后，可以通过父组件的自定义属性和方法间接设置子组件的属性。具体实现步骤如下：

  1. 定义父组件与子组件： 确保父组件和子组件的XML布局文件已经定义，并且子组件在父组件中正确引用。

  2. 使用@BindElement： 在父组件的JavaScript代码中，使用[@BindElement](/user/BindElement)注解绑定子组件的引用。

  3. 设置子组件属性： 通过父组件的JavaScript代码，使用绑定到子组件的引用直接设置子组件的属性。例如，如果子组件有一个名为myProperty的属性，可以通过this.$refs.childComponent.myProperty = newValue;进行设置。

  4. 同步更新： 确保在父组件中设置子组件属性后，UI能够同步更新。这通常依赖于鸿蒙系统的数据绑定机制。

  5. 注意事项： 确保子组件的属性是公开的，即子组件的JavaScript代码中应有相应的属性定义和getter/setter方法（如果适用）。

示例代码（伪代码）：

// 父组件JavaScript代码
@Entry
@Component
struct ParentComponent {
  [@BindElement](/user/BindElement)(childComponent) childRef: any;

  build() {
    Column() {
      ChildComponent(this.$refs.childRef)
    }
  }

  setProperty() {
    this.$refs.childRef.myProperty = 'newValue';
  }
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部