Flutter TextFormField( 装饰: ..., 后缀: IconButton( onPressed: , ));图标按钮 onPress 错误

Question

我想将我的输入类型作为密码，所以我希望它被审查。我想使用“obscureText：true”，所以它可以工作，但是当我想将它声明为一个函数并添加一个按钮时，该按钮将在您单击时显示密码并在您再次单击时隐藏。我正在尝试添加 suffix 属性和 IconButton();但它不工作。

bool hide() {
  return true;
}

@override
Widget build(BuildContext context){
  return Form(
    key: loginClass,
    ...
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 8),
          child: TextFormField(
            controller: password,
            obscureText: hide(),
            decoration: const InputDecoration(
              labelText: "Password",
              hintText: "Enter your password",
              border: OutlineInputBorder(),
              icon: Icon(Icons.lock),

              // Suffix line.

              suffix: IconButton(
                icon: Icon(Icons.visibility_rounded),
                onPressed: !hide, // Error line.
              ),

            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your password';
              }
              return null;
            },
          ),
        ),
       ...
}

错误：

Performing hot restart...
Syncing files to device Android SDK built for x86...

lib/login.dart:107:31: Error: Not a constant expression.
                  onPressed: !hide,
                              ^^^^

lib/login.dart:107:31: Error: A value of type 'bool Function()' can't be assigned to a variable of type 'bool'.
                  onPressed: !hide,
                              ^

lib/login.dart:107:30: Error: The argument type 'bool' can't be assigned to the parameter type 'void Function()?'.
                  onPressed: !hide,
                             ^

Restarted application in 218ms.

我想添加一个图标按钮。一旦你点击它，密码将被显示，但如果你再次点击将被审查。

Answer 1

您必须声明一个布尔变量并根据可见性按钮更改其值。此外，如果您不使用 BLOC 或 GETX，则必须使用有状态小部件来获取屏幕的更新。此外，如果您使用函数或 setState 分配 onPressed 函数，请不要使用 const。 我已经为你做了一个示例代码......你可以通过这个链接直接在浏览器上尝试：https://zapp.run/edit/flutter-zn206ban306?entry=lib/main.dart&file=lib/main.dart

Answer 2

onPressed 可以是null 或function，您不能将!hide 分配给它。创建一个新的状态变量来维护 StatefulWidget 中的可见性状态。

suffix: IconButton(
  icon: Icon(Icons.visibility_rounded),
  onPressed: () {
    setState(() {
      hideState = !hideState;
    });   
  },
),

Answer 3

suffixIcon: IconButton(
                      icon: Icon(
                          _isObscure
                              ? Icons.visibility_outlined
                              : Icons.visibility_off_outlined,
                          color: HexColor(CustomAppTheme.borderColor),
                        ),
                        onPressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                          });
                        },
                      ),

Answer 4

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Pass(),
  ));
}

class Pass extends StatefulWidget {
  const Pass({Key? key}) : super(key: key);

  @override
  State<Pass> createState() => _PassState();
}

class _PassState extends State<Pass> {
  bool hidePassword = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextFormField(
          obscureText: hidePassword,
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            labelText: 'Password',
            hintText: 'Enter Password',
            suffixIcon: IconButton(
              icon: Icon(
                hidePassword ? Icons.visibility : Icons.visibility_off,
              ),
              onPressed: () {
                setState(() {
                  hidePassword = !hidePassword;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

那么你可以试试这个