Question

当按下'+'或'-'时，我需要更新showDialog（）[infirmBox（）函数内的值。并将其渲染到Container Widget上。 setState（）在该弹出容器上似乎不起作用。我该怎么做呢？（我是初学者）

int _n = 0; //counter variable 

void add() {
    setState(() {
      _n++; 
    });
  }

void minus() {
      setState(() {
        if (_n != 0) 
          _n--;
      });
    }

void confirmBox() {

    showDialog(
      context: context,
      builder: (BuildContext context){
        return Container(
          child: Scaffold(
            body: Column(
              children: <Widget>[
                Center(
                  child: Column(
                    children: <Widget>[
                      FloatingActionButton(
                        onPressed: add,
                        child: Icon(Icons.add, color: Colors.black,),
                        backgroundColor: Colors.white,),

                      Text("$_n", //_n value is not updating yet
                          style: TextStyle(fontSize: 60.0)),

                      FloatingActionButton(
                        onPressed: minus,
                        child: Icon(
                        const IconData(0xe15b, fontFamily: 'MaterialIcons'),
                          color: Colors.black),
                        backgroundColor: Colors.white,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    );
  }

Answer 1

编辑：在此showDialog document中，谷歌说

EDIT2 ：此代码有效

  int _n = 0; //counter variable

  void add(setState) {
    setState(() {
      _n++;
    });
  }

  void minus(setState) {
    setState(() {
      if (_n != 0) _n--;
    });
  }

  void confirmBox() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context, StateSetter setState) {
            return Container(
              child: Scaffold(
                body: Column(
                  children: <Widget>[
                    Center(
                      child: Column(
                        children: <Widget>[
                          FloatingActionButton(
                            onPressed: () => add(setState),
                            child: Icon(
                              Icons.add,
                              color: Colors.black,
                            ),
                            backgroundColor: Colors.white,
                          ),
                          Text("$_n", //_n value is not updating yet
                              style: TextStyle(fontSize: 60.0)),
                          FloatingActionButton(
                            onPressed: () => minus(setState),
                            child: Icon(
                                const IconData(0xe15b,
                                    fontFamily: 'MaterialIcons'),
                                color: Colors.black),
                            backgroundColor: Colors.white,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            );
          });
        });
  }

如果对话框需要动态更新，请使用StatefulBuilder或自定义的StatefulWidget。

将此小部件和其他功能放入新的StatefulWidget

Container(
  child: Scaffold(
     body: Column(...

并在showDialog的构建器中调用

Answer 2

将对话框的所有内容包装在StatefulBuilder中： https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html

示例：

await showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    int selectedRadio = 0;
    return AlertDialog(
      content: StatefulBuilder(
        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) {
                  setState(() => selectedRadio = value);
                },
              );
            }),
          );
        },
      ),
    );
  },
);

Answer 3

可以有两种方法，

方法1

只需在对话框中声明StatefulBuilder或StatefulWidget。

方法2

声明一个abstract class

abstract class AlertDialogCallback {
  void onPositive(Object object);
  void onNegative();
}

然后将此类实现到您的小部件，

class _ContactUsState extends State<ContactUs> implements AlertDialogCallback {
...
//open dialog and pass this to provide callback a context
 onPressed:(){CustomAlertDialog(this).openDialog();}

...
//
@override
  void onNegative() {
    Navigator.of(context).pop();
}

  @override
  void onPositive(Object object) {
// do your logic here
  }
}

在CustomAlertDialog内部，获取您的mAlertDialogCallback并在其中传递对象

class CustomAlertDialog {
  AlertDialogCallback mAlertDialogCallback;

  CustomAlertDialog([this.mAlertDialogCallback]);

  openDialog() {
    // flutter defined function
    showDialog(
      builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
          title: Text(title),
          content: Text(message),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
      FlatButton(
                    child: Text(
                      actionButtonText1.toString().toUpperCase(),
                    ),
                    onPressed: () {
                      Navigator.of(context).pop();
                      mAlertDialogCallback.onPositive(obj);
                    },
                  )
          ],
        );
      },
    );
  }
}

Answer 4

使用您需要在对话框中显示的小部件创建StatefulWidget

class MyDialog extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyDialogState();
  }
}

class _MyDialogState extends State<MyDialog> {
      int _n = 0; //counter variable

      void add() {
        setState(() {
          _n++;
        });
      }

      void minus() {
        setState(() {
          if (_n != 0) _n--;
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: add,
                  child: Icon(
                    Icons.add,
                    color: Colors.black,
                  ),
                  backgroundColor: Colors.white,
                ),
                Text("$_n", //_n value is not updating yet
                    style: TextStyle(fontSize: 60.0)),
                FloatingActionButton(
                  onPressed: minus,
                  child: Icon(const IconData(0xe15b, fontFamily: 'MaterialIcons'),
                      color: Colors.black),
                  backgroundColor: Colors.white,
                ),
              ],
            ),
          ),
        );
      }
    }

然后在您的“ confirmBox”方法中进行更改，

void confirmBox() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return MyDialog();
      },
    );
  }

颤振：showDialog（）上的setState

4 个答案: