如何在TextField中創建一個suffixIcon，如果TextField為空則隱藏，但如果不是則顯示并切換bool以隱藏和顯示密碼？

我有一個用于密碼輸入的 TextField()。sufficIcon 是一只眼睛，僅當 TextField 不為空時才應顯示，但它也應為 bool，以便用戶可以隱藏和顯示密碼。當密碼顯示或隱藏時，它應該顯示不同的后綴圖示。

這是我現在的代碼：

bool isPasswordVisible = true;

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

uj5u.com熱心網友回復：

試試這個 ：

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

uj5u.com熱心網友回復：

你可以試試這個：宣告一個布爾變數：

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

uj5u.com熱心網友回復：

您可以使用以下代碼...

TextFormField 中的 obscureText 屬性用于顯示和隱藏 textField 中的文本。

在 Icon 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 為假時

標籤：扑 镖 文本域

上一篇：FlutterCustomClipper三角形

下一篇：無法使用Dart客戶端連接PythonWebsocket服務器