Flutter中Scaffold使用困惑：单Scaffold多页面切换实现方案

问题背景 #

作为Flutter新手，我正在开发带导航抽屉的应用，需要跳转至3个页面。目前纠结两种Scaffold使用方式：

• 官方推荐的每个页面单独配置Scaffold+Router方案，虽然实现简单，但会导致代码重复（比如每个页面都要加Material 3搜索栏），而且切换Scaffold时Snackbar状态无法保留
• 想保留全局单Scaffold，点击抽屉选项时切换Scaffold的body部分，但不知道怎么结合Router实现

以下是现有代码：

void main() {
  runApp(MesMaterialApp());
}

class MesMaterialApp extends StatelessWidget {
  const MesMaterialApp({super.key});

  @override
  Widget build(BuildContext context) {
    final brightness = View.of(context).platformDispatcher.platformBrightness;

    // Use with Google Fonts package to use downloadable fonts
    TextTheme textTheme = createTextTheme(context, "Poppins", "Lato");

    MaterialTheme theme = MaterialTheme(textTheme);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: brightness == Brightness.light ? theme.light() : theme.dark(),
      home: const MesApp(),
    );
  }
}

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

  @override
  State<MesApp> createState() => MesAppState();
}

class MesAppState extends State<MesApp> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final SearchController _searchController = SearchController();

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        automaticallyImplyLeading: false,
        clipBehavior: Clip.none,
        title: MesAppBar(
            searchController: _searchController,
            openDrawer: () => _scaffoldKey.currentState?.openDrawer()),
      ),
      drawer: MesDrawer(),
      body: HomeScreen(),
    );
  }
}

两种可行实现方案 #

方案1：状态管理直接切换body组件 #

这种方式适合简单场景，通过维护当前页面的状态变量，点击抽屉时更新状态替换body：

1. 在MesAppState中添加变量存储当前显示页面：

Widget _currentPage = HomeScreen();

2. 修改MesDrawer组件，添加页面选择回调：

class MesDrawer extends StatelessWidget {
  final Function(Widget) onPageSelected;

  const MesDrawer({super.key, required this.onPageSelected});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('页面1'),
            onTap: () {
              Navigator.pop(context); // 关闭抽屉
              onPageSelected(HomeScreen());
            },
          ),
          ListTile(
            title: const Text('页面2'),
            onTap: () {
              Navigator.pop(context);
              onPageSelected(Page2Screen());
            },
          ),
          ListTile(
            title: const Text('页面3'),
            onTap: () {
              Navigator.pop(context);
              onPageSelected(Page3Screen());
            },
          ),
        ],
      ),
    );
  }
}

3. 在MesAppState中传递回调并更新状态：

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      automaticallyImplyLeading: false,
      clipBehavior: Clip.none,
      title: MesAppBar(
          searchController: _searchController,
          openDrawer: () => _scaffoldKey.currentState?.openDrawer()),
    ),
    drawer: MesDrawer(
      onPageSelected: (page) {
        setState(() {
          _currentPage = page;
        });
      },
    ),
    body: _currentPage, // 替换原有的HomeScreen()
  );
}

方案2：嵌套Navigator结合Router实现 #

如果需要使用Flutter的Router导航能力，同时保留全局Scaffold，可以在Scaffold的body中嵌套一个Navigator：

1. 在MesAppState中定义导航key和路由表：

final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
final Map<String, Widget Function(BuildContext)> _routes = {
  '/': (context) => HomeScreen(),
  '/page2': (context) => Page2Screen(),
  '/page3': (context) => Page3Screen(),
};

2. 修改Scaffold的body为嵌套的Navigator：

body: Navigator(
  key: _navigatorKey,
  initialRoute: '/',
  onGenerateRoute: (settings) {
    WidgetBuilder builder = _routes[settings.name] ?? (context) => HomeScreen();
    return MaterialPageRoute(builder: builder, settings: settings);
  },
),

3. 抽屉选项点击时通过导航key跳转：

// MesDrawer中的ListTile示例
ListTile(
  title: const Text('页面2'),
  onTap: () {
    Navigator.pop(context); // 关闭抽屉
    _navigatorKey.currentState?.pushNamed('/page2');
  },
),

这种方式既保留了全局Scaffold的公共配置（搜索栏、抽屉），又能使用Router的导航功能，Snackbar状态也能正常保留（直接用ScaffoldMessenger.of(context)显示即可）。

总结 #

• 简单场景选方案1，代码轻量易维护
• 复杂导航场景选方案2，兼容Flutter Router系统，扩展性更强

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