Flutter - 如何为文本字段中的每个字符加下划线？答案

【问题标题】：Flutter - How to underline each character in a text field?Flutter - 如何为文本字段中的每个字符加下划线？
【发布时间】：2021-05-11 03:05:35
【问题描述】：

如何在 Flutter 中为每个字符添加下划线？我想进行电话验证，并希望每行包含一个字符，但不知道如何使用单个 TextForm（或者是否可能）。

示例：

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

这是这个问题的改写版本：Connecting multiple text fields to act like a single field in Flutter

处理此问题的 Flutter 包：https://pub.dev/packages/pin_code_fields

【讨论】：

【解决方案2】：

使用这个：

 TextField(
                          obscureText: true,
                          keyboardType: TextInputType.text,
                          textAlign: TextAlign.center,
                          maxLength: 1,
                        ),

必须在你的 ThemeData 中添加这个：

ThemeData(
         primarySwatch: Colors.red,
         accentColor: Colors.amber,

对于您的情况，您可以这样做

Row(
children<>[

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),

     TextField(
                              obscureText: true,
                              keyboardType: TextInputType.text,
                              textAlign: TextAlign.center,
                              maxLength: 1,
                            ),
]
)

对于布局修复使用Exapand()

【讨论】：