使用 *星号代替 .在颤动文本字段中

问题描述

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

解决方法

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

,

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