Flutter技术求助：如何创建如图所示的Pin code输入框？

可以通过原生HTML、CSS和JavaScript手动实现这种样式的Pin Code输入框，无需依赖第三方插件，以下是完整实现方案：

代码实现 #

HTML结构 #

<div class="pin-code-container">
  <input type="text" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]*">
  <input type="text" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]*">
  <input type="text" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]*">
  <input type="text" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]*">
</div>

CSS样式（匹配参考图视觉效果） #

.pin-code-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pin-input {
  width: 50px;
  height: 50px;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-size: 24px;
  outline: none;
  transition: border-color 0.2s ease;
}

.pin-input:focus {
  border-color: #2563eb;
}

.pin-input:not(:placeholder-shown) {
  border-color: #2563eb;
}

JavaScript交互逻辑 #

const pinInputs = document.querySelectorAll('.pin-input');

pinInputs.forEach((input, index) => {
  input.addEventListener('input', () => {
    if (input.value && index < pinInputs.length - 1) {
      pinInputs[index + 1].focus();
    }
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !input.value && index > 0) {
      pinInputs[index - 1].focus();
    }
  });
});

关键说明 #

• inputmode="numeric" 和 pattern="[0-9]*" 引导移动端弹出数字键盘，同时限制输入内容为数字
• CSS的transition实现边框颜色平滑切换，匹配参考图的聚焦/输入状态视觉反馈
• JavaScript自动处理焦点切换，提升输入流畅度
• 可根据需求调整输入框尺寸、颜色、间距等参数，完全自定义视觉样式

内容的提问来源于stack exchange，提问作者Deepak