Flutter切换页面后如何保留计数器变量值？

你遇到的问题是因为底部导航切换页面时，默认会销毁当前页面的实例，切换回来时重新创建，导致状态重置。下面是几种实用的解决方法：

方法1：用IndexedStack缓存所有页面状态（最省心） #

IndexedStack会将所有子页面实例都保存在内存中，切换时只是控制显示/隐藏，不会重建页面，自然就能保留状态。

父组件代码示例 #

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;

  // 提前创建所有页面的实例，避免每次切换重建
  final List<Widget> _pages = const [
    HomePage(),
    SecondPage(),
    ThirdPage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 用IndexedStack替代直接返回_pages[_selectedIndex]
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

这样修改后，HomePage的计数器状态会完全保留，切换页面再回来数值不会变。

方法2：用AutomaticKeepAliveClientMixin单独保持单个页面状态 #

如果不想缓存所有页面，只想让HomePage保留状态，可以给HomePage混入这个Mixin，告诉Flutter不要销毁它的状态。

HomePage代码示例 #

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

  @override
  State<HomePage> createState() => _HomePageState();
}

// 混入AutomaticKeepAliveClientMixin
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  // 必须重写这个方法，返回true表示需要保留状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则状态不会被正确保留
    super.build(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

注意：这种方法需要确保父组件切换页面时不会重新创建HomePage的实例，比如提前把HomePage实例存在父组件的列表里，而不是每次build都HomePage()新建。

方法3：将状态提升到父组件（适合需要共享状态的场景） #

把计数器的状态移到底部导航的父组件中，HomePage只负责显示数值和触发更新，这样状态完全不受页面切换影响。

父组件代码 #

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;
  // 把计数器状态放在父组件
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          // 给HomePage传状态和更新方法
          HomePage(
            counter: _counter,
            onIncrement: _incrementCounter,
          ),
          const SecondPage(),
          const ThirdPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

HomePage代码（改为无状态组件） #

class HomePage extends StatelessWidget {
  final int counter;
  final VoidCallback onIncrement;

  const HomePage({
    super.key,
    required this.counter,
    required this.onIncrement,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: onIncrement,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

这种方式的好处是状态集中管理，后续如果其他页面需要访问或修改计数器，直接在父组件操作即可。

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