HarmonyOS 鸿蒙Next输入框实现方法及参考代码

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next输入框实现方法及参考代码

主要是这个输入框是图片显示出来的。

cke_312.jpeg

Harmonyos Next教程
3 回复

参照楼上demo，Image叠加Text，再用一个隐藏的input框输入，输入值与Text值绑定即可。不过stack中，Text最好放在Image上方，防止被图片遮挡

Stack() {
  Image(AntdIcons.antd_border_outlined)
    .width('100%')
    .height('100%')

Text(params.num)
.fontWeight(FontWeight.Bold)
.fontSize(20)
} 

import { AntdIcons } from '[@hview](/user/hview)/icons_antd'

interface ItemParams {
  num: string
}

[@Builder](/user/Builder)
function Item(params: ItemParams) {
  Stack() {
    Text(params.num)
      .fontWeight(FontWeight.Bold)
      .fontSize(20)

    Image(AntdIcons.antd_border_outlined)
      .width('100%')
      .height('100%')
   /* TextInput({
      text:params.num
    })
      .width('100%')
      .height('100%')*/
  }
  .width('150px')
  .height('150px')
  .onClick(() => {
    focusControl.requestFocus("DemoInput")
  })
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page {
  [@State](/user/State) text:string = ''
  build() {
    Column() {
      Flex({
        justifyContent: FlexAlign.SpaceEvenly
      }) {
        ForEach(Array.from({ length: 6 }), (item: number,index:number) => {
          Item({ num:this.text[index] })
        })
      }

      TextInput({
        text:$$this.text
      }).key('DemoInput').type(InputType.Number)
        .maxLength(6)
        .width(0)
        .height(0)

    }
  }
}

作为IT专家，对于HarmonyOS 鸿蒙Next输入框的实现方法及参考代码，可以提供以下专业解答：

HarmonyOS 鸿蒙Next系统中，输入框组件主要包括TextInput和TextArea，其中TextInput为单行输入框，TextArea为多行输入框。

在实现验证码输入框时，可以采用一种优化方法，即使用一个隐藏的TextInput组件作为实际的输入框，并在其上覆盖多个Text组件用于显示用户输入的每个字符。这种方法可以解决多个独立TextInput组件无法监听删除事件的问题，并提供更流畅的用户体验。

参考代码如下：

@Entry
@Component
struct Login {
  @State code: string = ‘’;
  @State showCode: string[] = new Array(6).fill(‘’);

  build() {
    Column() {
      Text(‘请输入验证码’).width(280).fontSize(18).margin({ top: -80 })
      Text(‘验证码短信已发至:188 xxxx 6351’).width(280).fontSize(14).fontColor($r(‘app.color.grey’)).margin({ bottom: 105 })
      TextInput({ text: $$this.code }).width(0).height(0).maxLength(6).type(InputType.Number).key(‘sms-code’).opacity(0).defaultFocus(true)
      Row() {
        ForEach(this.showCode, (item: string, index) => {
          Text(String(this.code[index] || ‘’)).key(String(index)).width(38).height(59).padding({ top: 15, bottom: 15 }).fontColor(this.code.length === index || (this.code.length === this.showCode.length && this.code.length - 1 === index) ? ...
        })
      }
    }
  }
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部