目录

How do I implement chain calls in a custom component as in system components?

Currently, the ArkTS syntax does not support this type of chain call. A component cannot call methods like a regular object. You can only pass callback methods at the time of component declaration to modify the component's parameters and cannot directly use chain calls. If you need to implement chain calls in a custom component as in system components, you are advised to use modifier. The sample code is as follows:

@Entry
@Component
struct CustomComponentChainCall {
  @Styles
  pressedStyles() {
    .backgroundColor(Color.Blue)
  }

  build() {
    Column() {
      CustomSysComp({
        textInputModifier: new MyTextInputModifier()
          .backgroundColor(Color.Blue)
          .placeholderColor(Color.Red),
        buttonModifier: new MyButtonModifier()
          .opacity(0.5)
          .backgroundColor(Color.Orange)
      })
        .width('100%')
        .height(400)
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct CustomSysComp {
  // Set custom TextInput.
  textInputModifier: MyTextInputModifier = new MyTextInputModifier();
  // Set custom Button.
  buttonModifier: MyButtonModifier = new MyButtonModifier();

  build() {
    Column() {
      TextInput({ placeholder: 'placeholder' })
        .attributeModifier(this.textInputModifier)
      Button('button')
        .attributeModifier(this.buttonModifier)
    }
    .width('100%')
    .height('100%')
  }
}

// The provider creates custom classes to implement the system AttributeModifier interface.
export class MyTextInputModifier implements AttributeModifier<TextInputAttribute> {
  // Default Attributes
  private mWidth: Length = '100%';
  private mHeight: Length = 100;
  // custom attribute
  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);
  }
}

// The provider creates custom classes to implement the system AttributeModifier interface.
export class MyButtonModifier implements AttributeModifier<ButtonAttribute> {
  // Default Attributes
  private mWidth: Length = '50%';
  private mHeight: Length = 100;
  // custom attribute
  private mOpacity: number = 0;

  opacity(opacity: number): MyButtonModifier {
    this.mOpacity = opacity;
    return this;
  }

  private mBackgroundColor: ResourceColor = Color.Orange;

  backgroundColor(backgroundColor: ResourceColor): MyButtonModifier {
    this.mBackgroundColor = backgroundColor;
    return this;
  }

  applyNormalAttribute(instance: ButtonAttribute): void {
    instance.width(this.mWidth);
    instance.height(this.mHeight);
    instance.opacity(this.mOpacity);
    instance.backgroundColor(this.mBackgroundColor);
  }
}