如何为PageView的每个页面单独控制Flutter_Switch状态？

问题根源是你当前所有页面的开关绑定了同一个状态变量，导致切换页面时状态被共享。以下两种方法可以实现每个页面开关状态独立：

方法一：将每个页面封装为独立的StatefulWidget #

把带开关的页面做成独立组件，每个组件自己维护开关状态，彻底隔离状态：

import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';

class SwitchPage extends StatefulWidget {
  final String pageName;
  const SwitchPage({Key? key, required this.pageName}) : super(key: key);

  @override
  State<SwitchPage> createState() => _SwitchPageState();
}

class _SwitchPageState extends State<SwitchPage> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(widget.pageName, style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 20),
          FlutterSwitch(
            value: _isSwitched,
            onToggle: (value) {
              setState(() {
                _isSwitched = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

然后在PageView中直接使用该组件：

PageView(
  children: const [
    SwitchPage(pageName: "页面1"),
    SwitchPage(pageName: "页面2"),
    SwitchPage(pageName: "页面3"),
  ],
)

方法二：用列表存储每个页面的开关状态 #

如果页面结构简单，不想拆分组件，可以在父组件中用列表对应每个页面的开关状态：

class _HomePageState extends State<HomePage> {
  // 初始化所有页面开关为关闭，列表长度与PageView页面数一致
  final List<bool> _switchStates = [false, false, false];
  int _currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        onPageChanged: (index) => setState(() => _currentPageIndex = index),
        children: List.generate(3, (index) => _buildSwitchPage(index)),
      ),
    );
  }

  Widget _buildSwitchPage(int index) {
    return Center(
      child: FlutterSwitch(
        value: _switchStates[index],
        onToggle: (value) {
          setState(() {
            _switchStates[index] = value;
          });
        },
      ),
    );
  }
}

两种方法的适用场景 #

• 方法一适合页面布局复杂、需要独立扩展功能的场景，状态隔离最彻底。
• 方法二更适合页面结构简单的场景，代码更紧凑。

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