鸿蒙开发中如何实现自定义的验证码输入框UI？

Question

鸿蒙开发中如何实现自定义的验证码输入框UI？短信验证页面需要显示一个自定义的验证码输入框，查找文档发现TextInput不满足使用，想咨询一下要怎么实现自定义的的验证码输入框，或类似的实现Demo。还有就是进入页面后想输入框获取焦点并显示软键盘。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

具体demo如下：

@Entry 
@Component 
export struct InputPinCodePage { 
  //@Consume('pageInfos') pageInfos: NavPathStack; 
  @State codeTxt: string = ''; 
  @State screenWidth: number = 0; 
  private inputController: inputMethod.InputMethodController = inputMethod.getController(); 
  private isAttached: boolean = false; 
  private keyboardStatus: number = 0; // 默认是none， 1是hide，2是show 
 
  aboutToAppear(): void { 
    console.info('ImsaKit aboutToAppear') 
    this.screenWidth = 1080; 
  } 
 
  @Builder 
  componentBuilder() { 
    Column() { 
      Blank().height(42) 
      this.buildTitleName() 
      Blank().height(38) 
      this.buildNumTip() 
      this.buildAEnterCodeInput() 
      Blank().height(20) 
    } 
    .margin({ top: 10 }) 
    .borderRadius(8) 
    .backgroundColor(Color.White) 
  } 
 
  @Builder 
  buildTitleName() { 
    Row() { 
      Image($r('app.media.icon')) 
        .objectFit(ImageFit.Contain) 
        .width(24) 
        .height(24) 
      Blank().width(15) 
      Text() { 
        Span('输入验证码') 
          .fontSize(18) 
          .fontWeight(600) 
          .fontColor(Color.Black) 
      } 
    }.width('100%').justifyContent(FlexAlign.Start).padding({ left: 20， right: 20 }) 
  } 
 
  @Builder 
  buildNumTip() { 
    Row() { 
      Text() { 
        Span('已发送至') 
          .fontSize(12) 
          .fontWeight(400) 
          .fontColor(Color.Grey) 
      } 
 
      Blank().width(5) 
      Text() { 
        Span("18204079055") 
          .fontSize(12) 
          .fontWeight(500) 
          .fontColor(Color.Black) 
      } 
    }.width('100%').justifyContent(FlexAlign.Start).padding({ left: 20， right: 20 }) 
  } 
 
  @Styles 
  fancyUse(){ 
    .width((this.screenWidth - 110) / 6) 
    .height("100%") 
    .margin({ left: 5， right: 5 }) 
    .border({ 
      width: { bottom: 0.5 }， 
      color: { bottom: Color.Grey }， 
      style: { bottom: BorderStyle.Solid } 
    }) 
  } 
 
  @Builder 
  buildAEnterCodeInput() { 
    Flex({ 
      direction: FlexDirection.Row， 
      alignItems: ItemAlign.Center， 
      justifyContent: FlexAlign.SpaceBetween 
    }) { 
      Text(this.codeTxt[0]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[1]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[2]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[3]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[4]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
      Text(this.codeTxt[5]) 
        .fontSize(18) 
        .fontWeight(600) 
        .textAlign(TextAlign.Center) 
        .fancyUse() 
    } 
    .backgroundColor(Color.White) 
    .height(50) 
    .margin({ left: 15， right: 15 }) 
    .id("customInput") 
    .defaultFocus(true) 
    .onVisibleAreaChange([0.0， 1.0]， (isVisible: boolean， currentRatio: number) => { 
      console.info('ImsaKit Test Text isVisible: ' + isVisible + '， currentRatio:' + currentRatio) 
      if (isVisible && currentRatio >= 1.0) { 
        console.info('ImsaKit Test Text is fully visible. currentRatio:' + currentRatio) 
        this.attachAndListener(); 
      } 
 
      if (!isVisible && currentRatio <= 0.0) { 
        console.info('ImsaKit Test Text is completely invisible.') 
        this.dettach() 
      } 
    }) 
 
    .onClick(async () => { 
      console.info('ImsaKit keyboardStatus =' + this.keyboardStatus) 
      if (this.isAttached && this.keyboardStatus != 2) { 
        // 输入法配置项 
        let textConfig: inputMethod.TextConfig = { 
          inputAttribute: { 
            textInputType: inputMethod.TextInputType.NUMBER， 
            enterKeyType: inputMethod.EnterKeyType.GO 
          } 
        }; 
 
        // 控件绑定输入法 
        await this.inputController.attach(true， textConfig) 
        return 
      } 
    }) 
  } 
 
  dettach() { 
    this.inputController.off('insertText'); 
    this.inputController.off('deleteLeft'); 
    this.inputController.off('sendKeyboardStatus'); 
    this.inputController.detach((err: BusinessError) => { 
      if (err) { 
        console.error(`Failed to detach: ${JSON.stringify(err)}`); 
        return; 
      } 
      this.isAttached = false 
      console.log('Succeeded in detaching inputMethod.'); 
    }); 
  } 
 
  // 绑定和设置监听 
  async attachAndListener() { 
    // 输入法配置项 
    let textConfig: inputMethod.TextConfig = { 
      inputAttribute: { 
        textInputType: inputMethod.TextInputType.NUMBER， 
        enterKeyType: inputMethod.EnterKeyType.GO 
      } 
    }; 
 
    // 控件绑定输入法 
    await this.inputController.attach(true， textConfig) 
    this.isAttached = true 
    this.attachListener() 
  } 
 
  /** 
   * 订阅输入法回调 
   */ 
  attachListener(): void { 
    // 订阅输入法应用插入文本事件 
    this.inputController.on('insertText'， (text) => { 
      if (this.codeTxt.length >= 6) { 
        return 
      } 
      this.codeTxt += text; 
      console.info("this.inputText"， "insertText this.inputText===" + this.codeTxt) 
    }) 
 
    // 订阅输入法应用向左删除事件 
    this.inputController.on('deleteLeft'， (length) => { 
      this.codeTxt = this.codeTxt.substring(0， this.codeTxt.length - length); 
      console.info("this.inputText"， "deleteLeft  this.inputText===" + this.codeTxt) 
    }) 
 
    // 订阅输入法应用发送输入法软键盘状态事件 
    this.inputController.on('sendKeyboardStatus'， (keyboardStatus: inputMethod.KeyboardStatus) => { 
      this.keyboardStatus = keyboardStatus 
      console.info("ImsaKit this.inputText keyboardStatus= " + this.keyboardStatus) 
    }) 
  } 
 
  build() { 
    NavDestination() { 
      Column() { 
        this.componentBuilder() 
      } 
      .width('100%') 
      .height('100%') 
      .backgroundColor(Color.White) 
      .padding({ 
        left: 10， 
        right: 10， 
        bottom: 60 
      }) 
    } 
    .hideTitleBar(false) 
    .title("验证码") 
    .size({ width: '100%'， height: '100%' }) 
    .backgroundColor('#FFFFFF') 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。