HarmonyOS 子组件被父组件包装后,如何通过父组件设置子组件的属性

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

HarmonyOS
2024-08-29 11:16:47
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

如果是想对系统组件进行封装,可以参考:

https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-ui-component-encapsulation-V5

该文档中详细介绍了如何对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
分享
微博
QQ
微信
回复
2024-08-29 18:19:48
相关问题
设置组件宽度不超出组件
232浏览 • 1回复 待解决
组件调用组件方法
893浏览 • 1回复 待解决
如何设置组件组件宽度变化
1647浏览 • 1回复 待解决
组件事件可以传到组件
239浏览 • 1回复 待解决
组件组件使用@Link双向同步
573浏览 • 1回复 待解决
组件溢出容器问题
844浏览 • 1回复 待解决
组件如何处理组件内点击事件
2353浏览 • 1回复 待解决
组件事件能否到传递组件
2023浏览 • 1回复 待解决
弹窗组件调用组件函数传递
628浏览 • 1回复 待解决