flutter - 从子/孙小部件刷新对话框和父级

Question

我有一个带有单选按钮的对话框，当用户点击它们时我想刷新它，并且我希望它也刷新父级。类似问题的答案建议将对话框的内容包装在 a 中StatefulBuilder，但这不起作用，因为对话框的子项是这些 dialogOption 小部件。

我做了一个简单的例子：

class _MyHomePageState extends State<MyHomePage> {
  String selectedOption = "None";

  Widget dialogOption({@required String optionName}) {
    return InkWell(
      child: Row(children: [
        Icon(
          optionName == selectedOption
              ? Icons.radio_button_checked
              : Icons.radio_button_unchecked,
        ),
        Text(optionName),
      ]),
      onTap: () {
        setState(() {
          selectedOption = optionName;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text("Selected option: $selectedOption"),
          RaisedButton(
            child: Text("Open dialog"),
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          dialogOption(optionName: "Option 1"),
                          dialogOption(optionName: "Option 2"),
                        ],
                      ),
                    );
                  });
            },
          )
        ],
      ),
    );
  }
}

点击上面的 dialogOption 小部件只会刷新父级。

现在，如果我这样做StatefulBuilder：

return AlertDialog(
  content: StatefulBuilder(
    builder: (BuildContext context, StateSetter setState) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // tapping will NOT refresh dialog
          dialogOption(optionName: "Option 1"), 
          // tapping will NOT refresh dialog
          dialogOption(optionName: "Option 2"),
          InkWell(
            child: Text("This will refresh dialog"),
            onTap: () { // this WILL refresh dialog
              setState(() {});
            },
          ),
        ],
      );
    },
  ),
);

点击两个 dialogOption 小部件不会刷新对话框，但点击上面的 Inkwell 会。我不知道这有什么区别，但显然我希望这两个选项来刷新对话框和父级。

标签： flutter

Answer 1

class _MyHomePageState extends State<MyHomePage> {
  String selectedOption = "None";

  Widget dialogOption({@required String optionName, @required Function refresh}) {
    return InkWell(
      child: Row(
        children: [
          Icon(
            optionName == selectedOption ? Icons.radio_button_checked : Icons.radio_button_unchecked,
          ),
          Text(optionName),
        ],
      ),
      onTap: () {
        refresh(() {
          setState(() {
            selectedOption = optionName;
          });
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Text("Selected option: $selectedOption"),
          RaisedButton(
            child: Text("Open dialog"),
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return StatefulBuilder(
                    builder: (context, refresh) {
                      return AlertDialog(
                        content: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            dialogOption(optionName: "Option 1", refresh: refresh),
                            dialogOption(optionName: "Option 2", refresh: refresh),
                          ],
                        ),
                      );
                    },
                  );
                },
              );
            },
          )
        ],
      ),
    );
  }
}