Question

我正在使用TextFormField接受密码。我已将后缀图标设置为具有IconButton子级，以检测单击事件并切换TextFormField的obscuretext属性。 iconButton的回调函数被调用，但TextFormField不会重新绘制。有关如何解决此问题的任何想法？

static Widget buildTextFormField(String id, 
                               FormFieldValidator<String> validateField,
                               FormFieldSetter<String> saveField,
                               InputDecoration decoration,
                               EdgeInsetsGeometry paddingInfo,
                               EdgeInsetsGeometry marginInfo,
                               TextInputType keyboardType,
                               {bool obscureField:false, double width:328.0,
                                TextEditingController controller}
  ){
return Container(
  padding: paddingInfo,
  margin: marginInfo,
  width: width,
  child: TextFormField(
    key: Key(id),
    obscureText: obscureField,
    validator: validateField,
    onSaved: saveField,
    keyboardType: keyboardType,
    decoration: decoration,
    controller: controller,
  ),
);

}

InputDecoration passwordDecoration = InputDecoration(
   hintText: 'Password',
   labelText: 'Enter your password',
   suffixIcon:
      IconButton(
         icon: Icon(
            _passwordVisible ? Icons.visibility : Icons.visibility_off,
            semanticLabel: _passwordVisible ? 'hide password' : 'show password',
         ),
         onPressed: () {
            setState(() {
               _passwordVisible ^= true;
               //print("Icon button pressed! state: $_passwordVisible"); //Confirmed that the _passwordVisible is toggled each time the button is pressed.
            });
         }),
   labelStyle: TextStyle(
      fontFamily: 'Roboto Medium',
      fontSize: 12.0,
      color: Color(0x99000000),
      letterSpacing: 0.4,
   ),
);
final passwordPaddingInfo = const EdgeInsets.only(top: 15.0, bottom:15.0,
                                                  left: 22.0, right:25.0);
this._passwordField = AdministrationComponents.
buildTextFormField('passwordField', validatePassword,
   (value) => _password = value, passwordDecoration, passwordPaddingInfo,
   null, null, controller:_passwordController,
   obscureField: !_passwordVisible);

Answer 1

尝试这个

 bool _showPassword = false;
  void _togglevisibility() {
    setState(() {
      _showPassword = !_showPassword;
    });
  }

文本域代码

child: TextFormField(
                                controller: _passwordController,
                                obscureText: !_showPassword,
                                cursorColor: Colors.red,
                                style: TextStyle(color: Colors.white),
                                decoration: InputDecoration(
                                  hintText: "Password",
                                  border: InputBorder.none,
                                  suffixIcon: GestureDetector(
                                    onTap: () {
                                      _togglevisibility();
                                    },
                                    child: Icon(
                                      _showPassword ? Icons.visibility : Icons
                                          .visibility_off, color: Colors.red,),
                                  ),
                                ),
                              ),

Answer 2

感谢@ShyjuM和@ diegoveloper！我看到自己做错了-我在State类的构造函数中而不是在build方法中调用buildTextFormField。在build方法内部移动对buildTextFormField的调用可以修复该问题。再次感谢您的所有帮助！

Answer 3

您的代码中有一些错误。

替换此：

_passwordVisible > Icons.visibility : Icons.visibility_off,

和

_passwordVisible ^= true;

通过这种方式：

_passwordVisible ? Icons.visibility : Icons.visibility_off,

和

  _passwordVisible = !_passwordVisible;

Answer 4

在Flutter的TextFormField中显示/隐藏密码

步骤1：

bool _obscureText = true;

第2步：

void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

第3步：

 children: <Widget>[
                          new Expanded(
                            child: TextField(
                              controller: myControllerpswd,
                              obscureText: _obscureText,
                              textAlign: TextAlign.left,
                              decoration: InputDecoration(
                                labelStyle: TextStyle(color: Colors.black,fontSize: 16.0),
                                border: InputBorder.none,
                                hintText: '*********',
                                hintStyle: TextStyle(color: Colors.grey),
                              ),
                            ),
                          ),
                          new IconButton(
                              onPressed: _toggle,
                              icon: Image.asset(_obscureText ? 'assets/show.png': 'assets/hide.png'),
                              color:Color(getHexColorCode.getColorHexFromStr('#FDD148')),
                              iconSize: 10,
                          )  
                        ],

Answer 5

这是我使用的密码飞镖

import 'package:flutter/material.dart';
class LoginPass extends StatefulWidget {
LoginPass(this.controllerUpass);

  final Function controllerUpass;

  @override
  _LoginPassState createState() => _LoginPassState();
}

class _LoginPassState extends State<LoginPass> {
  bool _isHidden = true;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 30, 0, 10),
      child: Container(
        height: 35,
        child: Center(
          child: Padding(
            padding: const EdgeInsets.only(left: 20),
            child: TextField(
              obscureText: _isHidden,
              onChanged: (value) {
                widget.controllerUpass(value);
              },
              decoration: InputDecoration(
                  hintText: 'Password',
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  suffixIcon: GestureDetector(
                    onTap: () {
                      setState(() {
                        _isHidden = !_isHidden;
                      });
                    },
                    child: _isHidden
                        ? Icon(
                            Icons.remove_red_eye_sharp,
                            color: Colors.blue,
                          )
                        : Icon(
                            Icons.remove_red_eye,
                            color: Colors.red,
                          ),
                  )),
            ),
          ),
        ),
        decoration: BoxDecoration(
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black26,
              spreadRadius: 1,
              blurRadius: 3,
              offset: Offset(0, 3),
            ),
          ],
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(3)),
        ),
      ),
    );
  }
}

在主通话中

LoginPass(controllerUpass),

在Flutter的TextFormField中显示/隐藏密码

5 个答案: