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

问题描述

我正在开发一个仅会从用户那里获得2次输入的应用程序，将来可能会有3次输入。因此，我将showDialog与2个inputfield和2个按钮一起使用。非常简单。看起来很像这样： 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,child: FlatButton(
                  color: Colors.cyan[600],child: const Text('ADD'),onpressed: () {
                    setState(() {
                      _title.text = '';
                      _code.text = '';
                    });
                    Navigator.pop(context);
                  },);
}

在此先感谢您的帮助。我是初学者。

解决方法

您可以将其放入另一个可以接收任何非静态属性值的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,child: FlatButton(
                  color: Colors.cyan[600],child: const Text('$rightButtonText'),onPressed: () {
                    setState(() {
                      _title.text = '';
                      _code.text = '';
                    });
                    Navigator.pop(context);
                  },);
}

,

我没有找到解决方案，但终于找到了解决方法。 由于对话框是由按钮触发的，因此我创建了一个无状态小部件按钮，该按钮接收一个布尔值和一个整数作为图标大小。我添加了图标大小，因为该小部件有两种用途：appBar和Floating Action Button，并且每种情况下图标大小都不同。通过图标的大小，我可以在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',content: Column(
            mainAxisSize: MainAxisSize.min,children: [
              Container(
                padding: EdgeInsets.only(
                  bottom: 30,top: 0,child: new TextField(
                  // onSubmitted: next,decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(bottom: 5),hintText: 'Eg: My code',Container(
                // padding: EdgeInsets.only(bottom: 10),child: TextField(
                  autofocus: true,controller: _code,decoration: InputDecoration(
                    contentPadding: EdgeInsets.zero,hintText: 'Eg: EC20008347607',actions: [
            Row(
              children: [
                Container(
                  padding: EdgeInsets.only(right: 60,bottom: 7),child: const Text('CANCEL'),onPressed: () {
                      _resetFields();
                      Navigator.pop(context);
                    },Container(
                  padding: EdgeInsets.only(right: 19,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 <<<

我使用了社区共享的其他代码对样式进行了一些改进。但是仍有改进的空间。

非常感谢您。

亲切的问候。 ?