Flutter打开一个Switch开关其余全部同步开启该如何解决

问题根源 #

所有Switch组件共用了同一个全局isSwitched布尔状态，任意开关触发修改操作都会更新同一个状态值，最终导致所有开关同步变化。

修复步骤 #

1. 替换单个布尔状态为Map结构，存储每个筛选选项的独立开关状态
2. 改造filterList通用方法，支持传入对应选项的当前状态和状态修改回调
3. 每个筛选项调用filterList时传入独立的状态绑定逻辑

修复后完整代码 #

class _FilterPageState extends State<FilterPage> {
  // 用Map存储每个筛选项的独立状态
  Map<String, bool> filterStates = {
    'Gluten-free': false,
    'Lactose-free': false,
    'Vegeterian': false,
    'Vegan': false,
  };

  Widget title(Size mediaQuery) {
    return Container(
      height: mediaQuery.height * 0.1,
      padding: const EdgeInsets.all(10),
      alignment: Alignment.center,
      child: const Text(
        'Adjust your meal selection.',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
    );
  }

  // 新增参数：当前开关状态、状态变化回调
  Widget filterList(String title, String subText, Size mediaQuery, bool currentValue, Function(bool) onChanged) {
    return Container(
      margin: const EdgeInsets.all(15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 17,
                ),
              ),
              Text(
                subText,
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 15,
                ),
              ),
            ],
          ),
          Switch(
            value: currentValue, // 绑定传入的独立状态
            onChanged: onChanged, // 使用传入的回调处理状态变化
            activeTrackColor: Colors.pinkAccent,
            activeColor: Colors.pink,
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Your Filters',
          textAlign: TextAlign.start,
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.save,
            ),
          ),
        ],
      ),
      drawer: const DrawerList(),
      body: Column(
        children: [
          title(mediaQuery),
          // 每个筛选项传入独立的状态和处理逻辑
          filterList(
            'Gluten-free',
            'Only include gluten-free meals',
            mediaQuery,
            filterStates['Gluten-free']!,
            (value) {
              setState(() {
                filterStates['Gluten-free'] = value;
              });
            }
          ),
          filterList(
            'Lactose-free',
            'Only include lactose-free meals',
            mediaQuery,
            filterStates['Lactose-free']!,
            (value) {
              setState(() {
                filterStates['Lactose-free'] = value;
              });
            }
          ),
          filterList(
            'Vegeterian',
            'Only include vegeterian meals',
            mediaQuery,
            filterStates['Vegeterian']!,
            (value) {
              setState(() {
                filterStates['Vegeterian'] = value;
              });
            }
          ),
          filterList(
            'Vegan',
            'Only include vegan meals',
            mediaQuery,
            filterStates['Vegan']!,
            (value) {
              setState(() {
                filterStates['Vegan'] = value;
              });
            }
          ),
        ],
      ),
    );
  }
}

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