Flutter复用SwitchListTile后父类无法获取更新值的问题

1. 将子组件改为无状态，把状态托管给父组件 #

让FitterItem只负责渲染UI和触发状态变更回调，不维护自身状态，所有状态逻辑交给父组件FitterScreen处理。

示例代码：

class FitterItem extends StatelessWidget {
  final String title;
  final bool value;
  final ValueChanged<bool> onChanged;

  const FitterItem({
    super.key,
    required this.title,
    required this.value,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return SwitchListTile(
      title: Text(title),
      value: value,
      onChanged: onChanged,
    );
  }
}

2. 父组件维护状态并同步给子组件 #

在FitterScreen中声明状态变量，通过onChanged回调更新父组件状态，确保开关状态和父组件变量实时同步。

示例代码：

class FitterScreen extends StatefulWidget {
  const FitterScreen({super.key});

  @override
  State<FitterScreen> createState() => _FitterScreenState();
}

class _FitterScreenState extends State<FitterScreen> {
  bool _glutenFitter = false;
  bool _dairyFitter = false; // 示例其他筛选开关

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 此处可获取最新的开关状态
        print("无麸质筛选状态: $_glutenFitter");
        // 可将状态返回上一页
        Navigator.pop(context, {
          'gluten': _glutenFitter,
          'dairy': _dairyFitter,
        });
        return true;
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('筛选')),
        body: ListView(
          children: [
            FitterItem(
              title: '无麸质',
              value: _glutenFitter,
              onChanged: (newValue) {
                setState(() {
                  _glutenFitter = newValue;
                });
              },
            ),
            FitterItem(
              title: '无乳制品',
              value: _dairyFitter,
              onChanged: (newValue) {
                setState(() {
                  _dairyFitter = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

问题根源 #

如果你的FitterItem是有状态组件，自身维护了开关状态，那么父组件的_glutenFitter变量和子组件状态是完全独立的，子组件切换开关时不会通知父组件更新变量，导致WillPopScope中始终拿到初始值。通过将状态上移到父组件，让子组件成为纯UI组件，就能保证状态同步。

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