چگونه می توان از Harmonyos Next استفاده کرد – Arkui: TextInput Component؟

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

.type(value: InputType)

.onChange(callback: EditableTextOnChangeCallback)

@Entry
@Component
struct TextInputPage {
  @State message: string = 'TextInput Component';
  @State phone:string='';

  build() {
    Column({space:6}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      TextInput({placeholder:'Please enter your account'})
      TextInput({text:'Set initial value'})
      TextInput({placeholder:'Please input a password'})
        .type(InputType.Password)
      TextInput({placeholder:'Please enter your phone number'})
        .type(InputType.Number)
        .onChange((value:string)=>{
          this.phone=value
        })
      Text('The phone number is: '+this.phone)
    }
    .height('100%')
    .width('100%')
  }
}

showCounter(value: boolean, options?: InputCounterOptions)

@Entry
@Component
struct TextInputPage2 {
  @State text: string = '';
  controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .maxLength(6)
        .showUnderline(true)
        .showCounter(true,
        //The display effect of the counter is the current number of characters input by the user divided by the maximum character limit. The maximum character limit is set through the maxLength() interface.
          { thresholdPercentage: 50, highlightBorder: true })
          //If the user's current input character count reaches the maximum character limit multiplied by 50% (threshold percentage). The character counter displays.
          //When the user sets highlightBorder to false, configure to remove the red border. When this parameter is not set, it defaults to true.
        .onChange((value: string) => {
          this.text = value;
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}