Show/Hide Flutter 的 TextFormField 中的密码

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

您的代码有一些错误。

替换为：

_passwordVisible > Icons.visibility : Icons.visibility_off,

和

_passwordVisible ^= true;

通过这个:

_passwordVisible ? Icons.visibility : Icons.visibility_off,

和

  _passwordVisible = !_passwordVisible;

Answer 2

感谢@ShyjuM 和@diegoveloper！我知道我做错了什么 - 我在 State class 的构造函数中调用 buildTextFormField 而不是在构建方法中。在构建方法中移动对 buildTextFormField 的调用修复了它。再次感谢您的帮助！

Answer 3

Show/Hide Flutter 的 TextFormField 中的密码

第 1 步：

bool _obscureText = true;

第 2 步：

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

第 3 步：

 TextField(
                controller: password,
                style: TextStyle(fontSize: 16.0),
                obscureText: _obscureText,
                decoration: new InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  hintText: "Password",
                  suffixIcon: InkWell(
                    onTap: _toggle,
                    child: Icon(
                      _obscureText
                          ? FontAwesomeIcons.eye
                          : FontAwesomeIcons.eyeSlash,
                      size: 15.0,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),

Answer 4

试试这个

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

Textform 域代码

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 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),

Show/Hide Flutter 的 TextFormField 中的密码

Show/Hide Passwords in Flutter's TextFormField

flutter

flutter-layout