如何根据状态禁用 Flutter 中的按钮

Question

我做了一个删除按钮，弹出对话框让你记录删除原因。如果用户输入原因，我只希望启用提交按钮。这是我对那个小部件的看法：

  class _DeleteCrewMemberWidgetState extends State<DeleteCrewMemberWidget> {
  var note = '';

  @override
  Widget build(BuildContext context) {
    bool enabled = note.length >= 10;

    // delete this member
    delete() {
      Navigator.pop(context, 'OK');
    }

    print(enabled);
    return IconButton(
      icon: Icon(Icons.remove_circle),
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Text('Delete ${widget.position.name}'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                  'Please enter a reason for not needing this crew member.'),
              TextField(
                maxLines: 4,
                onChanged: (value) => setState(() {
                  note = value;
                  print(note);
                }),
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter your reason here',
                ),
              ),
            ],
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: enabled ? () => delete() : null,
              child: const Text('OK'),
            ),
          ],
        ),
      ),
    );
  }
}

当我运行它并输入注释时，该按钮保持禁用状态。我在构建时打印状态值，并且在我键入时它确实更改为已启用。当我离开图标并返回时，它会显示已启用，即使注释是空的。但是当我输入笔记时它永远不会改变。

有什么想法吗？

Answer 1

不知道我是否理解正确，但是在用户输入原因之前禁用“确定”按钮：

  onPressed: enabled ? () => note.length >= 10 ? delete() : null : null,

您的代码：

class _DeleteCrewMemberWidgetState extends State<DeleteCrewMemberWidget> {
  var note = '';

  @override
  Widget build(BuildContext context) {
    bool enabled = note.length >= 10;

    // delete this member
    delete() {
      Navigator.pop(context, 'OK');
    }

    print(enabled);
    return IconButton(
      icon: Icon(Icons.remove_circle),
      onPressed: () => showDialog<String>(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Text('Delete ${widget.position.name}'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                  'Please enter a reason for not needing this crew member.'),
              TextField(
                maxLines: 4,
                onChanged: (value) => setState(() {
                  note = value;
                  print(note);
                }),
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter your reason here',
                ),
              ),
            ],
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'Cancel'),
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: enabled ? () => note.length >= 10 ? delete() : null : null,
              child: const Text('OK'),
            ),
          ],
        ),
      ),
    );
  }
}

看看我能不能帮你解决这个问题。

Answer 2

理想情况下你需要两件事

1. 包含在有状态生成器中的警报对话框以更新其状态。
2. 关闭对话框后，重置

   enabled

   和

   note

   的值。所以等待对话框关闭并根据您的需要重置值。

修改后的代码：

class _DeleteCrewMemberWidgetState extends State<DeleteCrewMemberWidget> {
  var note = '';
  bool enabled = false;
  @override
  Widget build(BuildContext context) {
    //No longer needed here
    //bool enabled = note.length >= 10;
    delete() {
      Navigator.pop(context, 'OK');
    }

    /// print(enabled);
    return IconButton(
        icon: Icon(Icons.remove_circle),
        onPressed: () async {
          String? input = await showDialog<String>(
            context: context,
            builder: (BuildContext context) => StatefulBuilder(
              builder: (context, setState) {
                return AlertDialog(
                  title: const Text('Delete Some Name'),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text(
                          'Please enter a reason for not needing this crew member.'),
                      TextField(
                        maxLines: 4,
                        onChanged: (value) {
                          if (value.length >= 10) {
                            enabled = true;
                          } else {
                            enabled = false;
                          }
                          print(value);
                          setState(() {});
                        },
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                          hintText: 'Enter your reason here',
                        ),
                      ),
                    ],
                  ),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () => Navigator.pop(context, 'Cancel'),
                      child: const Text('Cancel'),
                    ),
                    TextButton(
                      onPressed: enabled ? () => delete() : null,
                      child: const Text('OK'),
                    ),
                  ],
                );
              },
            ),
          );

          //You can add a conditional here to check the return String and enable disable likewise
          note = '';
          enabled = false;

          setState(() {});
        });
  }
}

注意：您并不总是需要用 setState 包装您的变量来更新。只需调用 setState 就会自动使用更新的变量更新小部件树。