flutter - 如何在 Flutter 中刷新 AlertDialog？

Question

目前，我有AlertDialog一个IconButton. 用户可以点击 IconButton，每次点击我都有两种颜色。问题是我需要关闭 AlertDialog 并重新打开才能看到颜色图标的状态变化。我想在用户单击时立即更改 IconButton 颜色。

这是代码：

bool pressphone = false;
//....
new IconButton(
   icon: new Icon(Icons.phone),
   color: pressphone ? Colors.grey : Colors.green,
   onPressed: () => setState(() => pressphone = !pressphone),
),

score 303 · Accepted Answer

使用 StatefulBuilder 在 Dialog 中使用 setState 并仅在其中更新 Widget。

showDialog(
  context: context,
  builder: (context) {
    String contentText = "Content of Dialog";
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          title: Text("Title of Dialog"),
          content: Text(contentText),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  contentText = "Changed Content of Dialog";
                });
              },
              child: Text("Change"),
            ),
          ],
        );
      },
    );
  },
);

score 65 · Accepted Answer

这是因为您需要将AlertDialog自己的StatefulWidget所有状态操作逻辑移到那里的颜色上。

更新：

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: RaisedButton(
      child: Text('Open Dialog'),
      onPressed: () {
        showDialog(
            context: context,
            builder: (_) {
              return MyDialog();
            });
      },
    )));
  }
}

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => new _MyDialogState();
}

class _MyDialogState extends State<MyDialog> {
  Color _c = Colors.redAccent;
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Container(
        color: _c,
        height: 20.0,
        width: 20.0,
      ),
      actions: <Widget>[
        FlatButton(
            child: Text('Switch'),
            onPressed: () => setState(() {
                  _c == Colors.redAccent
                      ? _c = Colors.blueAccent
                      : _c = Colors.redAccent;
                }))
      ],
    );
  }
}

score 62 · Accepted Answer

StatefulBuilder在 AlertDialog的content部分中使用 a 。甚至StatefulBuilder 文档实际上也有一个带有对话框的示例。

它的作用是为您提供一个新的context和setState函数，以便在需要时进行重建。

示例代码：

showDialog(
  context: context,
  builder: (BuildContext context) {

    int selectedRadio = 0; // Declare your variable outside the builder
    
    return AlertDialog( 
      content: StatefulBuilder(  // You need this, notice the parameters below:
        builder: (BuildContext context, StateSetter setState) {
          return Column(  // Then, the content of your dialog.
            mainAxisSize: MainAxisSize.min,
            children: List<Widget>.generate(4, (int index) {
              return Radio<int>(
                value: index,
                groupValue: selectedRadio,
                onChanged: (int value) {
                  // Whenever you need, call setState on your variable
                  setState(() => selectedRadio = value);
                },
              );
            }),
          );
        },
      ),
    );
  },
);

正如我所提到的，这就是showDialog 文档中所说的：

[...] 构建器返回的小部件与最初调用 showDialog 的位置不共享上下文。如果对话框需要动态更新，请使用 StatefulBuilder 或自定义 StatefulWidget。

score 34 · Accepted Answer

首先你需要使用StatefulBuilder. 然后我设置_setState变量，甚至可以在外部使用StatefulBuilder，以设置新状态。

StateSetter _setState;
String _demoText = "test";

showDialog(
  context: context,
  builder: (BuildContext context) {

    return AlertDialog( 
      content: StatefulBuilder(  // You need this, notice the parameters below:
        builder: (BuildContext context, StateSetter setState) {
          _setState = setState;
          return Text(_demoText);
        },
      ),
    );
  },
);

_setState 的使用方式与 setState 方法相同。例如像这样：

_setState(() {
    _demoText = "new test text";
});

score 1 · Accepted Answer

如果您通过 View Models 将数据与 UI 分离并使用Provider带有的包ChangeNotifier，则需要像这样在调用对话框的小部件中包含当前模型：

showDialog(context: context, builder: (dialog) {
              return ChangeNotifierProvider.value(
                  value: context.read<ViewModel>(),
                child: CustomStatefulDialogWidget(),
              );
            },

请注意，可能有一种更清洁的方法可以做到这一点，但这对我有用。

有关的附加信息Provider：https ://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

score -2 · Accepted Answer

目前要检索我使用的 Dialog 的值

showDialog().then((val){
setState (() {}); 
print (val);
});

示例第一个屏幕

    onPressed: () { 
    showDialog(
       context: context,
       barrierDismissible: false,
       builder: (context) {
         return AddDespesa();
       }).then((val) {
         setState(() {});
         print(val);
        }
    );
   }

第二屏

AlertDialog(
    title: Text("Sucesso!"),
    content: Text("Gasto resgristrado com sucesso"),
    actions: <Widget>[
    FlatButton(
      child: Text("OK"),
      onPressed: () {
         Navigator.pop(context, true);
      },
     ),
   ],
 );

将打印真实，

flutter - 如何在 Flutter 中刷新 AlertDialog？

6 回答 6

Related

Reference