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

Question

我有一个自定义表单字段来输入应用程序的 pin。而不是使用传统的 .写 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

将模糊字符设置为 *，如下所示： TextFormField(obscuringCharacter: '*',),

Answer 2

在 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,
        ),
      ),
    );
  }
}

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

Use * (Asterisk) instead of . in flutter textfield

flutter

textformfield

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

Use * (Asterisk) instead of . in flutter textfield

flutter

textformfield

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