如何在切换桌面/移动端视图时避免菜单索引重置？

核心思路是将菜单选中索引的状态提升到父组件HomePage中，而非让桌面版/移动版Widget各自维护内部状态。这样无论窗口尺寸变化导致切换哪个版本组件，状态都会被父组件保留，不会丢失。

实现步骤与代码示例 #

1. 在HomePage中维护共享状态
   把选中索引和索引变更回调放在HomePage的State里，根据屏幕尺寸渲染对应版本的组件，并传递状态和回调：

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

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

class _HomePageState extends State<HomePage> {
  // 共享的菜单选中索引，由父组件持有
  int _selectedMenuIndex = 0;

  // 索引变更回调，用于子组件更新父组件状态
  void _onMenuIndexChanged(int newIndex) {
    setState(() {
      _selectedMenuIndex = newIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 根据屏幕宽度判断是否为移动版
    final isMobile = MediaQuery.of(context).size.width < 600;
    return Scaffold(
      body: isMobile
          ? MobileVersionWidget(
              selectedIndex: _selectedMenuIndex,
              onIndexChanged: _onMenuIndexChanged,
            )
          : DesktopVersionWidget(
              selectedIndex: _selectedMenuIndex,
              onIndexChanged: _onMenuIndexChanged,
            ),
    );
  }
}

2. 桌面版Widget接收外部状态与回调
   桌面版组件改为无状态Widget，使用父组件传递的selectedIndex和onIndexChanged来控制菜单：

class DesktopVersionWidget extends StatelessWidget {
  final int selectedIndex;
  final ValueChanged<int> onIndexChanged;

  const DesktopVersionWidget({
    super.key,
    required this.selectedIndex,
    required this.onIndexChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        NavigationRail(
          selectedIndex: selectedIndex,
          onDestinationSelected: onIndexChanged,
          destinations: const [
            NavigationRailDestination(
              icon: Icon(Icons.home),
              label: Text('首页'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.settings),
              label: Text('设置'),
            ),
            // 更多菜单选项...
          ],
        ),
        Expanded(
          child: Center(
            // 这里可以根据selectedIndex渲染对应内容
            child: Text('桌面版当前选中索引: $selectedIndex'),
          ),
        ),
      ],
    );
  }
}

3. 移动版Widget同理接收外部状态
   移动版底部导航栏同样使用父组件传递的状态：

class MobileVersionWidget extends StatelessWidget {
  final int selectedIndex;
  final ValueChanged<int> onIndexChanged;

  const MobileVersionWidget({
    super.key,
    required this.selectedIndex,
    required this.onIndexChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedIndex,
        onTap: onIndexChanged,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
          // 更多菜单选项...
        ],
      ),
      body: Center(
        child: Text('移动版当前选中索引: $selectedIndex'),
      ),
    );
  }
}

原理说明 #

当窗口尺寸变化时，Flutter会重新执行HomePage的build方法，此时如果原来的子组件（比如桌面版）被销毁，它内部的状态也会丢失。而把状态放在父组件后，子组件只是作为无状态的展示容器，状态始终由HomePage持有，切换组件时自然不会重置选中索引。

如果你的项目需要更复杂的状态共享（比如跨多个页面），也可以使用Provider、Riverpod等状态管理工具，但对于这个场景，状态提升到父组件是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者Ariel H.