Flutter如何在IndexedStack中重建指定Widget？

已知IndexedStack的作用是缓存页面，避免Widget重建，但需要在从“Decrement”标签（Page2）切换回“Increment”标签（Page1）时，重建Page1（让其count重置为初始值0）。尝试使用removeAt和insert方法重新添加Page1，但未生效。

原因分析 #

Flutter判断是否重建Widget State的依据是Widget的类型和Key。直接使用removeAt和insert重新添加原Page1实例时，Widget的类型和Key都没有变化，Flutter会认为这是同一个Widget，不会重建其State，所以count不会重置。

解决方案 #

要触发Page1的重建，需要让Flutter认为这是一个新的Widget实例，有两种可行方式：

方式1：每次切换到Page1时创建新实例 #

修改HomePage的onTap回调，当切换到Page1（index=0）时，重新生成Page1的实例并更新pages列表：

class _HomePageState extends State<HomePage> {
  List<Widget> pages = [Page1(), Page2()];
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Save Page State'),
      ),

      body: IndexedStack(
        index: selectedIndex,
        children: pages,
      ),

      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.plus_one_outlined),
            label: 'Increment',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.exposure_minus_1_outlined),
            label: 'Decrement',
          ),
        ],
        currentIndex: selectedIndex,
        onTap: (index){
          setState(() {
            if (index == 0) {
              // 切换到Page1时，创建新的实例
              pages[0] = Page1();
            }
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

方式2：通过可变Key触发重建 #

给Page1设置一个可变的ValueKey，每次需要重建时更新Key的值，让Flutter识别为新Widget：

class _HomePageState extends State<HomePage> {
  int _page1Key = 0;
  List<Widget> get pages => [Page1(key: ValueKey(_page1Key)), Page2()];
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Save Page State'),
      ),

      body: IndexedStack(
        index: selectedIndex,
        children: pages,
      ),

      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.plus_one_outlined),
            label: 'Increment',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.exposure_minus_1_outlined),
            label: 'Decrement',
          ),
        ],
        currentIndex: selectedIndex,
        onTap: (index){
          setState(() {
            if (index == 0) {
              // 更新Key值，触发Page1重建
              _page1Key++;
            }
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

这两种方式都能实现从Page2切换回Page1时，强制重建Page1，让count重置为0。

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