如何在Flutter中刷新AlertDialog

时间:2018-08-22 07:59:02

标签: colors flutter alertdialog flutter-layout

当前,我使用IconButton打开AlertDialog。用户可以单击此IconButton,每次单击都有两种颜色。问题是我需要关闭AlertDialog并重新打开以查看颜色图标的状态变化。我只需要打开AlertDialog,然后单击IconButton并更改其颜色即可。

这是代码:

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

5 个答案:

答案 0 :(得分:14)

首先,您需要使用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";
});

答案 1 :(得分:8)

这是因为您需要将$('#mapsvg').mapSvg({source: '"assets/mapsvg.svg"'}); 放在自己的AlertDialog中,然后将所有状态操作逻辑移到该颜色上。

更新:

enter image description here

StatefulWidget

答案 2 :(得分:6)

文档建议您在AlertDialog的StatefulBuilder部分中使用content。甚至StatefulBuilder docs实际上都有一个带有对话框的示例。

它的作用是为您提供新的上下文和setState函数,以便在需要时进行重建。

文档中的示例代码:

showDialog<void>(
  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(
            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 docs上是这样说的:

  

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

答案 3 :(得分:1)

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>[
            FlatButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            FlatButton(
              onPressed: () {
                setState(() {
                  contentText = "Changed Content of Dialog";
                });
              },
              child: Text("Change"),
            ),
          ],
        );
      },
    );
  },
);

答案 4 :(得分:0)

当前要检索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);
      },
     ),
   ],
 );

将被打印为真,