鸿蒙应用开发：实现专业数字输入框的UI方案

1. 项目背景与需求分析

在移动应用开发中，手机号和验证码输入框是最常见的基础组件之一。传统实现方式通常采用单个输入框配合下划线样式，但这种方案存在两个明显缺陷：一是无法精确控制每个字符的显示位置，二是难以实现"单格单字符+独立下划线"的专业视觉效果。

最近我在开发鸿蒙应用时，产品经理提出了一个具体需求：要实现类似银行APP那种每个数字独立显示在方格内、下方带独立下划线的输入效果。这种设计不仅能提升视觉专业度，还能通过清晰的数字分隔降低用户输入错误率。

2. 技术方案选型与对比

2.1 传统方案的问题

最初我尝试了最直观的实现方式：

typescript复制TextInput()
  .border({ width: 1, color: '#999' })
  .type(InputType.Number)

这种方案虽然简单，但存在以下问题：

1. 无法控制每个字符的显示位置
2. 下划线是整体而非独立分隔
3. 光标位置与数字对应关系不精确

2.2 创新实现思路

经过多次尝试，我最终确定了"UI展示层+输入逻辑层"的双层架构：

1. UI展示层：用ForEach循环渲染多个Text+Divider组合
2. 输入逻辑层：隐藏的TextInput处理实际输入
3. 交互桥梁：点击事件将焦点传递给隐藏输入框

这种方案的优点在于：

• 完全控制每个数字的显示样式
• 保持原生输入体验
• 代码结构清晰易维护

3. 核心实现细节解析

3.1 UI展示层构建

关键组件是自定义的TextAndLine，其核心逻辑如下：

typescript复制@ComponentV2
export struct TextAndLine {
  @Param chat: string = ""  // 绑定的输入值
  @Param count: number = 11 // 格子数量
  // ...其他参数
  
  build() {
    Row({ space: 8 }) {
      ForEach(this.dataArray, (value: string, index: number) => {
        Column() {
          Text(t