HarmonyOS一杯冰美式的时间 -- 验证码框

最新推荐文章于 2025-06-13 18:13:56 发布

2501_90229280

最新推荐文章于 2025-06-13 18:13:56 发布

阅读量821

点赞数 7

文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/2501_90229280/article/details/145196472

版权

 @Component
 struct CodeInputView {
   build() {
     TextInput()
       .backgroundColor("#CCFFFFFF")
       .borderRadius(10)
       .maxLength(1)
       .type(InputType.Number)
       .align(Alignment.Center)
   }
 }

如果一个个去添加输入框，太麻烦了，如果有改动也很头大，所以我们可以塞到一个父布局中，使用ForEach来添加。因为这种情形的输入一般是横向的，使用Row是一个很好的主意，所以变成了“在Row中使用ForEach添加若干个TextInput”，我们稍微修改下：

 @Preview
 @Component
 struct CodeInputView {
   // 创建一个包含5个空字符串的数组，用于存储输入的数字
   @State codeKids: Array<string> = new Array(5).fill('')
 
   // 构建界面
   build() {
     Row({ space: 10 }) {
       ForEach(this.codeKids, (item: string, index: number) => {
         TextInput(this.codeKids[index])
           .backgroundColor("#CCFFFFFF") // 设置文本输入框的背景颜色
           .borderRadius(10) // 设置文本输入框的圆角
           .maxLength(1) // 设置最大输入长度为1
           .layoutWeight(1) // 设置布局权重
           .fontSize(25) // 设置字体大小
           .height("100%") // 设置高度为100%
           .type(InputType.Number) // 设置输入类型为数字
           .align(Alignment.Center) // 设置文本居中对齐
       }, (item: string) => item)
     }.backgroundColor(Color.Black) // 设置整个行的背景颜色为黑色，方便preview
     .height(80) // 设置行的高度为80
   }
 }

如果我们逐个手动添加输入框，会显得非常繁琐，而且如果需要进行修改的话也会变得很复杂。

因此，我们可以将这些输入框放置在一个父布局中，然后使用 ForEach 函数来动态添加它们。由于这种情况下输入框通常是水平排列的，所以使用 Row 组件是一个明智的选择。因此，我们将代码改成了 ‘在 Row 中使用 ForEach 动态添加多个 TextInput’ 的方式。

我们新增了一个名为 codeKids 的数组，并用空字符进行了填充，并使用 @State 注解来修饰它。在 Row 的 ForEach 中，我们直接使用 codeKids 作为数据源，这样输入框的数量会根据 codeKids 数组的长度而变化，而 codeKids 的大小就代表了验证码的长度。

而 layoutWeight(1) 和 { space: 10 } 这两个组合参数，实现了等宽和等间距的效果。

通过@Preview，我们已经能看到效果了。