Flutter中AlertBox内Switch组件无法正常切换、拨动回弹问题求助

• Flutter 中showDialog生成的弹窗属于独立路由，默认无状态，你在父组件SwitchDemo中调用的setState只会触发父页面布局刷新，不会触发弹窗重绘，因此Switch切换后视觉上会回弹，这不是Switch组件本身的问题，是弹窗状态更新方式不正确导致的。
• Switch的onChanged回调中存在冗余代码isOn = !isOn;，该行修改的是局部变量，不会对实际维护的开关状态产生影响，属于无效代码。

使用StatefulBuilder包裹弹窗内需要动态更新的内容，通过它提供的专属setState方法触发弹窗自身的UI刷新，同时删除无效冗余代码即可。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const SwitchDemo(),
    );
  }
}

class SwitchDemo extends StatefulWidget {
  const SwitchDemo({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _TabsPageState();
}

class _TabsPageState extends State<SwitchDemo> {
  late bool isInstructionView;

  @override
  void initState() {
    super.initState();
    isInstructionView = Global.shared.isInstructionView;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("add data"),
        ),
        body: Container(
          child: TextButton(
              child: const Text('Open Alert Box'),
              onPressed: () => {
                    showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          // 新增StatefulBuilder包裹弹窗内容，获取弹窗专属的setState
                          return StatefulBuilder(
                            builder: (context, dialogSetState) {
                              return Padding(
                                padding: EdgeInsets.symmetric(
                                  horizontal: MediaQuery.of(context).size.width / 20,
                                  vertical:
                                      MediaQuery.of(context).size.height / 20,
                                ),
                                child: AlertDialog(
                                  content: Container(
                                    child: Switch(
                                      value: isInstructionView,
                                      onChanged: (bool isOn) {
                                        // 使用弹窗的setState刷新弹窗UI
                                        dialogSetState(() {
                                          isInstructionView = isOn;
                                          Global.shared.isInstructionView = isOn;
                                        });
                                        // 如果需要父页面同时同步状态，额外调用父组件的setState
                                        setState(() {});
                                      },
                                      activeColor: Colors.blue,
                                      inactiveTrackColor: Colors.grey,
                                      inactiveThumbColor: Colors.grey,
                                    ),
                                  ),
                                ),
                              );
                            }
                          );
                        })
                  }),
        ));
  }
}

class Global {
  static final shared = Global();
  bool isInstructionView = false;
}

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