0

我有一个自定义表单字段来输入应用程序的 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,
        ),
      ),
    );
  }
}
4

2 回答 2

3

在 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,
        ),
      ),
    );
  }
}
于 2021-01-12T11:31:15.020 回答
2

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

于 2021-01-12T11:31:08.040 回答