如何实现Flutter设置弹窗的保存按钮激活与修改保存功能？

要实现你要的效果，核心是跟踪设置项的变更状态，并根据状态控制Apply按钮的可用性，同时在点击时保存修改。下面是具体的实现方案：

关键思路 #

1. 在弹窗内部维护当前设置的副本（避免直接修改原状态，直到用户确认）
2. 标记设置是否被修改，以此控制Apply按钮的激活状态
3. 给设置项（开关、下拉框）绑定回调，变更时更新副本并标记修改状态
4. 点击Apply时将副本同步到原状态，关闭弹窗

修改后的完整代码 #

showAlertDialogSettings(BuildContext context, state) {
  // 从传入的state获取初始设置值
  bool soundEnabled = state.soundEnabled;
  String difficulty = state.difficulty;
  bool hasChanged = false;

  showDialog(
    context: context,
    builder: (BuildContext context) {
      return BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
        // 使用StatefulBuilder让弹窗内部可以更新状态
        child: StatefulBuilder(
          builder: (context, setState) {
            Widget okButton = TextButton(
              child: Text("Apply"),
              // 根据hasChanged控制按钮是否可用
              onPressed: hasChanged
                  ? () {
                      // 保存修改到原state
                      state.updateSettings(soundEnabled, difficulty);
                      Navigator.pop(context);
                    }
                  : null,
            );

            Widget cancelButton = TextButton(
              child: Text("Close"),
              onPressed: () => Navigator.pop(context),
            );

            return AlertDialog(
              title: Center(child: Text("Settings")),
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Sound:'),
                      // 给SwitchWidget绑定当前值和变更回调
                      SwitchWidget(
                        value: soundEnabled,
                        onChanged: (newValue) {
                          setState(() {
                            soundEnabled = newValue;
                            hasChanged = true;
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 48,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('Difficulty:'),
                        Padding(
                          padding: const EdgeInsets.only(right: 5),
                          // 给下拉框绑定当前值和变更回调
                          child: DropDownButtonSettingsWidget(
                            value: difficulty,
                            onChanged: (newValue) {
                              setState(() {
                                difficulty = newValue;
                                hasChanged = true;
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              actions: [okButton, cancelButton],
            );
          },
        ),
      );
    },
  );
}

细节说明 #

• StatefulBuilder的作用：因为弹窗是在函数中创建的，用StatefulBuilder可以在弹窗内部实现局部状态更新，不用把整个弹窗改成StatefulWidget。
• 设置副本的维护：初始时从传入的state复制设置值，所有修改先作用于副本，直到用户点击Apply才同步到原状态，避免未确认的修改直接影响全局状态。
• 按钮状态控制：当hasChanged为true时，Apply按钮的onPressed才会绑定保存逻辑，否则为null（按钮灰化不可用）。
• 子组件的修改：你需要确保SwitchWidget和DropDownButtonSettingsWidget支持接收value和onChanged参数，这样才能把状态变更传递到弹窗内部。

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