使用 *（星号）代替 。在颤动文本字段中

Question

我有一个自定义表单字段来输入应用程序的 pin。而不是使用常规的 . 编写引脚时，我想使用 * ，如下图所示。我该如何实现这一目标？

这是表单字段的代码：

class PINNumber extends StatelessWidget {
  final TextEditingController textEditingController;
  final OutlineInputBorder outlineInputBorder;

  const PINNumber(
      {Key key, this.textEditingController, this.outlineInputBorder})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      child: TextFormField(
        controller: textEditingController,
        enabled: false,
        obscureText: true,
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(16.0),
          border: outlineInputBorder,
          filled: true,
          fillColor: Colors.white30,
        ),
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 21.0,
          color: Colors.black,
        ),
      ),
    );
  }
}

Answer 1

在 TextField 小部件中，有一个名为 的属性obscureText，它会将字母变成点。但您可以覆盖该字符以显示星号。

 obscureText: true,
 obscuringCharacter: '*',

因此，在您的情况下，您需要在此处添加 obscuringCharacter：

class PINNumber extends StatelessWidget {
  final TextEditingController textEditingController;
  final OutlineInputBorder outlineInputBorder;

  const PINNumber(
      {Key key, this.textEditingController, this.outlineInputBorder})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      child: TextFormField(
        controller: textEditingController,
        enabled: false,
        obscuringCharacter: '*', //added obscuringCharacter here
        obscureText: true,
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(16.0),
          border: outlineInputBorder,
          filled: true,
          fillColor: Colors.white30,
        ),
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 21.0,
          color: Colors.black,
        ),
      ),
    );
  }
}