Flutter：将自定义对话框创建为 StatefulWidget？答案

【问题标题】：Flutter: Create custom dialog as StatefulWidget?Flutter：将自定义对话框创建为 StatefulWidget？
【发布时间】：2021-01-01 16:27:18
【问题描述】：

我正在开发一个应用程序，它只会从用户那里获得 2 个输入，未来可能会得到 3 个。所以我使用带有 2 个输入字段和 2 个按钮的 showDialog。很简单。看起来很像这样： enter image description here 如果它被作为函数调用，它会完美地显示在主屏幕中。但我想在应用程序的另一个屏幕中使用相同的对话框，只需更改其中一个按钮上的文本。由于对话代码很长，我不想重复，我想把它放在一个新的 StatefulWidget 中（从输入字段中检索信息并在之后清除它们）。现在的问题是 我找不到从外部小部件返回对话框的方法。我不知道这是否由于整个异步小部件不兼容而实际上是不可能的，或者我也是愚蠢地想出这个。

这是我的对话框的代码（作为一个函数）：

_dialog() async {
  await showDialog<String>(
    context: context,
    child: ButtonBarTheme(
      data: ButtonBarThemeData(alignment: MainAxisAlignment.center),
      child: AlertDialog(
        contentPadding: const EdgeInsets.all(20.0),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: EdgeInsets.only(bottom: 15),
              child: new TextField(
                // onSubmitted: next,
                autofocus: true,
                controller: _title,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(bottom: 2),
                  labelText: 'Title',
                  hintText: 'Example: New Smartphone',
                ),
              ),
            ),
            TextField(
              autofocus: true,
              controller: _codigo,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                labelText: 'Code',
                hintText: 'Example: EC20008347607',
              ),
            ),
          ],
        ),
        actions: [
          Row(
            children: [
              Container(
                padding: EdgeInsets.only(right: 35, bottom: 5),
                child: FlatButton(
                    color: Colors.cyan[600],
                    child: const Text('CANCEL'),
                    onPressed: () {
                      Navigator.pop(context);
                    }),
              ),
              Container(
                padding: EdgeInsets.only(left: 15, bottom: 5),
                child: FlatButton(
                  color: Colors.cyan[600],
                  child: const Text('ADD'),
                  onPressed: () {
                    setState(() {
                      _title.text = '';
                      _code.text = '';
                    });
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

提前感谢您的帮助。我是初学者。

【问题讨论】：

标签： flutter dialog widget textinput stateful

【解决方案1】：

你可以把它放在另一个接受任何非静态属性值的 dart 文件中，像这样：

CustomAlertDialog({String leftButtonText, String rightButtonText}) async {
  return AlertDialog(
        contentPadding: const EdgeInsets.all(20.0),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: EdgeInsets.only(bottom: 15),
              child: new TextField(
                // onSubmitted: next,
                autofocus: true,
                controller: _title,
                    decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(bottom: 2),
                  labelText: 'Title',
                  hintText: 'Example: New Smartphone',
                ),
              ),
            ),
             TextField(
              autofocus: true,
              controller: _codigo,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                labelText: 'Code',
                hintText: 'Example: EC20008347607',
              ),
            ),
          ],
        ),
        actions: [
          Row(
            children: [
              Container(
                padding: EdgeInsets.only(right: 35, bottom: 5),
                child: FlatButton(
                    color: Colors.cyan[600],
                    child: const Text('$leftButtonText'),
                    onPressed: () {
                       Navigator.pop(context);
                    }),
              ),
               Container(
                 padding: EdgeInsets.only(left: 15, bottom: 5),
                child: FlatButton(
                  color: Colors.cyan[600],
                  child: const Text('$rightButtonText'),
                  onPressed: () {
                    setState(() {
                      _title.text = '';
                      _code.text = '';
                    });
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

【讨论】：

我之前尝试返回一个 AlertDialog 但 VSCode 说“缺少 'State.build' 的具体实现”。我需要它位于有状态的小部件中，以便使用 TextControllers 从输入字段中提取数据。并且以任何方式我试图从一个小部件（具有构建状态）返回一个对话框，我得到了错误，因为对话框是异步操作。无论如何感谢您的回复。
你要么必须传入当前的 BuildContext。我忘了补充。
不起作用。我尝试将该代码添加到有状态小部件并传递 BuildContext。 VS Code 说与我的其他实现不同，没有错误，但对话框也没有出现。我认为这是没有意义的。对话框应该用来向用户显示简单的东西，也许像我的例子一样检索一些信息，但它们并不意味着完全是外部组件，据可以检查，它们显示它的唯一方法是使用触发器功能在它们覆盖的同一屏幕上，所以我将不得不重复代码。不管怎么说，还是要谢谢你。 ?
或者，您可以使用 RxDart 或 BLoC 之类的状态管理系统。这将允许您在不依赖有状态小部件的情况下管理 2 个字段。我可以通过小吃店做到这一点，操作方式相同。

【解决方案2】：

我没有找到解决方案，但我终于找到了解决方法。由于对话框是由按钮触发的，因此我创建了一个无状态小部件按钮，该按钮接收一个布尔值和一个整数作为图标大小。我添加了图标大小，因为我对小部件有 2 种用途：appBar 和浮动操作按钮，并且图标大小在每种情况下都不同。使用图标大小，我可以在 Floating Action Button 内创建一个更大的按钮，并为 appBar 创建一个较小的按钮。我不得不在浮动按钮中将其放大，因为浮动按钮的边缘不会触发对话框，这将是此实现的唯一缺点。无论如何，这是代码：

class CustomDialog extends StatelessWidget {
  final bool edit;
  final double iconSize;

  CustomDialog({this.edit, this.iconSize});
  final _title = TextEditingController();
  final _code = TextEditingController();

  void _resetFields() {
    _title.text = '';
    _code.text = '';
  }

  // void _addCode(context) {}

  // void _editCode() {}

  void _displayDialog(context) async {
    await showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          titlePadding: EdgeInsets.only(top: 25),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(18.0),
            ),
          ),
          contentPadding: EdgeInsets.all(25),
          title: edit
              ? Text(
                  'EDIT CODE',
                  style: TextStyle(
                    color: Colors.cyan[600],
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                )
              : Text(
                  'NEW CODE',
                  style: TextStyle(
                    color: Colors.cyan[600],
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                padding: EdgeInsets.only(
                  bottom: 30,
                  top: 0,
                ),
                child: new TextField(
                  // onSubmitted: next,
                  autofocus: true,
                  controller: _title,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(bottom: 5),
                    labelText: 'Code',
                    hintText: 'Eg: My code',
                  ),
                ),
              ),
              Container(
                // padding: EdgeInsets.only(bottom: 10),
                child: TextField(
                  autofocus: true,
                  controller: _code,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.zero,
                    labelText: 'Code',
                    hintText: 'Eg: EC20008347607',
                  ),
                ),
              ),
            ],
          ),
          actions: [
            Row(
              children: [
                Container(
                  padding: EdgeInsets.only(right: 60, bottom: 7),
                  child: FlatButton(
                    color: Colors.cyan[600],
                    child: const Text('CANCEL'),
                    onPressed: () {
                      _resetFields();
                      Navigator.pop(context);
                    },
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(right: 19, bottom: 7),
                  child: FlatButton(
                    color: Colors.cyan[600],
                    child:
                        edit ? const Text('SAVE') : const Text('ADD'),
                    onPressed: edit
                        ? () => _editCode()
                        : () => _addCode(context),
                  ),
                ),
              ],
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => _displayDialog(context),
      child: Icon(
        edit ? Icons.edit : Icons.add,
        size: iconSize,
      ),
    );
  }
}

>>> Here's the result <<<

我使用社区共享的其他代码稍微改进了样式。但仍有改进的余地。

非常感谢。

亲切的问候。 ?

【讨论】：