Flutter表单内Radio按钮无法选中问题求助

问题根源 #

你遇到的问题是因为Dialog弹窗的UI独立于页面主体，showDialog的builder只会执行一次。点击Radio按钮时调用的是外部页面的setState，这只会更新页面主体的状态，不会触发Dialog内部UI的重建——哪怕gender变量实际已经改变，弹窗里的Radio选项也不会同步刷新，看起来就像功能失效了。

修复方案 #

在Dialog的Form外层套一个StatefulBuilder，让弹窗拥有自己的状态管理能力，点击Radio时触发弹窗内部的状态更新，就能正常刷新UI了。

修改后的代码示例 #

FloatingActionButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // 弹窗内部维护gender状态
        String dialogGender = gender;
        return AlertDialog(
          title: Text('New User'),
          content: Stack(
            children: <Widget>[
              Positioned(
                right: -40.0,
                top: -40.0,
                child: InkResponse(
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: CircleAvatar(
                    child: Icon(Icons.close),
                    backgroundColor: Colors.blue,
                  ),
                ),
              ),
              // 用StatefulBuilder包裹Form，管理弹窗内部状态
              StatefulBuilder(
                builder: (context, setState) {
                  return Form(
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          // 省略其他TextFormField代码...
                          //radioButtons
                          Container(
                            padding: EdgeInsets.all(20),
                            child: Column(
                              children: [
                                Text(
                                  "What is your gender?",
                                  style: TextStyle(fontSize: 18),
                                ),
                                Divider(),
                                RadioListTile(
                                  title: Text("Male"),
                                  value: "male",
                                  groupValue: dialogGender,
                                  onChanged: (value) {
                                    setState(() {
                                      dialogGender = value.toString();
                                    });
                                  },
                                ),
                                RadioListTile(
                                  title: Text("Female"),
                                  value: "female",
                                  groupValue: dialogGender,
                                  onChanged: (value) {
                                    setState(() {
                                      dialogGender = value.toString();
                                    });
                                  },
                                ),
                                RadioListTile(
                                  title: Text("Other"),
                                  value: "other",
                                  groupValue: dialogGender,
                                  onChanged: (value) {
                                    setState(() {
                                      dialogGender = value.toString();
                                    });
                                  },
                                )
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: FloatingActionButton(
                              child: Text("Submit"),
                              onPressed: () {
                                // 将弹窗内选择的gender同步到外部变量
                                setState(() {
                                  gender = dialogGender;
                                });
                                print(gender);
                                Navigator.pop(context);
                              },
                            ),
                          )
                        ],
                      ),
                    ),
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  },
  child: Icon(Icons.person),
  backgroundColor: Colors.blue,
),

额外说明 #

如果需要在弹窗关闭后将选择的gender值传递回页面，也可以通过Navigator.pop(context, dialogGender)的方式返回，在showDialog的then回调中接收：

showDialog(...).then((value) {
  if (value != null) {
    setState(() {
      gender = value;
    });
  }
});

内容的提问来源于stack exchange，提问作者Loftie Fourie