我如何在 TextField 中创建一个 suffixIcon，如果 TextField 为空则隐藏但在不为空时显示并切换 bool 以隐藏和显示密码？

Question

我有一个用于密码输入的 TextField()。 sufficIcon 是一只眼睛，只应在 TextField 不为空时显示，但它也应切换为布尔值，以便用户可以隐藏和显示密码。当显示或隐藏密码时，它应该显示不同的后缀图标。

这是我现在的代码：

bool isPasswordVisible = true;

IconButton(
          icon: isPasswordVisible
              ? const Icon(Icons.visibility)
              : const Icon(Icons.visibility_off),
          onPressed: () {
            setState(() {
              isPasswordVisible = !isPasswordVisible;
            });
          },
        ),

Answer 1

试试这个：

bool hidePassword = true;
bool hidePasswordConfirm = true;
String? confirmPassword;

现在在 TextFormField 小部件中：

TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    obscureText: hidePassword,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      suffixIcon: IconButton(
                        icon: Icon(
                          hidePassword
                              ? Icons.visibility_off
                              : Icons.visibility,
                        ),
                        onPressed: () {
                          setState(() {
                            hidePassword = !hidePassword;
                          });
                        },
                      ),
                    ),
                    validator: (val) {
                      confirmPassword = val;
                      if (val != null) {
                        if (val.length <= 6)
                          return 'Password must be 6 characters.';
                      } else
                        return null;
                    },
                  );

现在进行密码确认：

TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Confirm Password',
                      suffixIcon: IconButton(
                        icon: Icon(
                          hidePassword
                              ? Icons.visibility_off
                              : Icons.visibility,
                        ),
                        onPressed: () {
                          setState(() {
                            hidePasswordConfirm = !hidePasswordConfirm;
                          });
                        },
                      ),
                    ),
                    validator: (val) {
                      if (val!.isEmpty) {
                        return 'Enter the password first';
                      } else if (val != confirmPassword)
                        return 'Password must be same.';
                      else
                        return null;
                    },
                    obscureText: hidePasswordConfirm,
                  );

Answer 2

你可以试试这个：声明一个布尔变量：

bool isIconVisible = false;
bool hidePassword = true;

然后在 TextField 中使用属性 onChanged:

TextField(
  onChanged: (value) {
    if (value.isNotEmpty) {
      setState(() {
        isIconVisible = true;
      });
    } else {
      setState(() {
        isIconVisible = false;
      });
    }
  },
  obscureText: hidePassword,
  decoration: InputDecoration(
        labelText: 'Password',
        suffixIcon:  isIconVisible ? IconButton(
             onPressed: (){
                    setState(() {
                         hidePassword = !hidePassword
                      });
                    },
             icon:  Icon(
                  hidePassword ? 
                  Icons.visibility_off : Icons.visibility,
                    ),
       ) : null,
    ),
);

Answer 3

您可以使用下面的代码...

obscureText 属性在 TextFormField 中用于显示和隐藏 textField 中的文本。

在图标onPress中我们可以改变bool值，UI使用SetState来管理

bool _isObscure = true;
final _passwordTextController = TextEditingController();
final _focusPassword = FocusNode();

               TextFormField(
                    controller: _passwordTextController,
                    focusNode: _focusPassword,
                    obscureText: _isObscure,
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                        hoverColor: Colors.transparent,
                        splashColor: Colors.transparent,
                        iconSize: 23.0,
                        icon: Icon(
                          _isObscure
                              ? Icons.visibility_sharp
                              : Icons.visibility_off_sharp,
                        ),
                        onPressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                          });
                        },
                      ),
                      filled: true,
                      fillColor: const Color.fromRGBO(255,255,255,1),
                      hintText: 'password',
                      counterText: "",
                      contentPadding: const EdgeInsets.symmetric(vertical: 25.0, 
                      horizontal: 20.0),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: Color.fromRGBO(210, 248, 248, 1)),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                      focusedBorder:  OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: Colors.lightBlueAccent, width: 2.0),
                        borderRadius: BorderRadius.circular(30.0),
                      ),
                        errorBorder:  OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30.0),
                          borderSide: const BorderSide(width: 3,
                              color: Color.fromRGBO(255, 0, 0,1)),),
                      focusedErrorBorder: const OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(30)),
                        borderSide: BorderSide(
                          width: 3,
                          color: Color.fromRGBO(255, 0, 0,1),
                        ),
                      ),
                      hintStyle: const TextStyle(
                          color: Color.fromRGBO(128,128,128,1),
                          fontStyle: FontStyle.normal,
                          fontSize: 14.0),
                    ),
                  ),

当 obscureText 为真时

当 obscureText 为 false 时

我如何在 TextField 中创建一个 suffixIcon，如果 TextField 为空则隐藏但在不为空时显示并切换 bool 以隐藏和显示密码？

How can i make a suffixIcon in a TextField which hides if TextField is empty but shows when not and toggles a bool to hide and show password?

textfield

dart

flutter