HarmonyOS TextInput的使用

//展示在页面上的文本  
@State @Watch('setValue') codeTxt: string = '';  
@State Index: number[] = [0, 1, 2, 3, 4, 5]  
//控制选中文本样式  
@State showMouse: boolean[] = [];  
  
@Builder  
buildAEnterCodeInput() {  
  Flex({  
    direction: FlexDirection.Row,  
    alignItems: ItemAlign.Center,  
    justifyContent: FlexAlign.SpaceBetween  
  }) {  
    Column(){  
      Row(){  
        //text将拿到的值进行逐个展示  
        Text(this.codeTxt[0])  
          .fontSize(18)  
          .fontWeight(600)  
          .textAlign(TextAlign.Center)  
          .width(50)  
          .height(50)  
          .margin({ left: 5, right: 5 })// .border({ width: 0.5, color: Color.Grey ,style: BorderStyle.Solid })  
            //设置验证码选中的样式  
          .border(this.showMouse[this.Index[0]] ? this.btnCancelBorderActive : this.btnCancelBorder)  
          .borderRadius(5)  
        ……  
      }  
      .onClick(()=>{  
        //通过sendEventByKey方法将输入框的点击事件转移给text  
        sendEventByKey('TextInput',10,'')  
      })  
      //写一个输入框，将其隐藏  
      TextInput({ controller: this.controller })  
        .width('100%')  
        .height(100)// .zIndex(1)  
        .opacity(0)  
        .id('TextInput')  
        .customKeyboard(this.CustomKeyboardBuilder())  
        .onChange((value) => {  
          //将隐藏的输入框的value值赋值给codeTxt  
          this.codeTxt = value  
          if (this.codeTxt.length >= 6) {  
            return  
          }  
        })  
    }  
  }  
  .backgroundColor(Color.White)  
  .height(50)  
  .margin({ left: 15, right: 15 })  
  .id("customInput")  
  .defaultFocus(false)  
  
}  
//对codeTxt进行监听，  
setValue() {  
  if (this.codeTxt) {  
    this.handelInputTxt(this.codeTxt.length, this.codeTxt);  
  } else {  
    this.handelInputTxt(0, '');  
  }  
}  
  
//改变输入框选中的值，showMouse是一个布尔类型的数组，当前验证码处于输入状态时，将其值改为true  
handelInputTxt(length: number, val: string) {  
  length === this.maxLength ? this.showMouse.fill(false) : this.showMouse.fill(false).splice(length - 1, 0, true);  
  console.log('----length', length)  
  console.info("----this.showMouse", JSON.stringify(this.showMouse));  
  // }  
}  
  
设置的公共页面，点击即可拉起半模态  
  
//公共页面，点击即可拉起半模态  
@Builder  
buildTitleName() {  
  CommonPage()  
    .onClick(() => {  
      //模态弹窗是否展示  
      this.isShow = true  
    })  
    .bindSheet($$this.isShow, this.bindSheetBuilder, {  
      height: '70%',  
      // detents:[SheetSize.MEDIUM,SheetSize.LARGE,500],  
      // backgroundColor:Color.Gray,  
      blurStyle: BlurStyle.Thick,  
      showClose: false,  
      // title:{title:""},  
      preferType: SheetType.CENTER  
    })  
  
多个textInput焦点转移时未复现键盘收起再弹出的问题；  
@Entry  
@Component  
struct Index5701_2 {  
  build() {  
    Column(){  
      TextInput()  
        .id('input1')  
        .backgroundColor(Color.Blue)  
      TextInput()  
        .id('input2')  
        .backgroundColor(Color.Blue)  
      TextInput()  
        .id('input3')  
        .backgroundColor(Color.Blue)  
      TextInput()  
        .id('input4')  
        .backgroundColor(Color.Blue)  
      TextInput()  
        .id('input5')  
        .backgroundColor(Color.Blue)  
      Button("焦点转移").onClick(() =>{  
        focusControl.requestFocus('input2')  
      })  
    }  
.justifyContent(FlexAlign.Center)  
.width('100%')  
  
}  
}