Flutter Adaptive Scaffold特定断点下Appbar无法显示问题

当设置useDrawer: true后，AdaptiveScaffold在中、大屏断点下会默认将导航元素整合为侧边抽屉/rail，同时隐藏独立的AppBar。要让AppBar在所有尺寸下始终可见，可通过以下两种方式实现：

方法一：外层嵌套Scaffold独立控制AppBar #

直接将AdaptiveScaffold作为外层Scaffold的body，把AppBar放在外层Scaffold中，使其不受AdaptiveScaffold的断点逻辑影响，始终显示：

Scaffold(
  appBar: AppBar(title: const Text("My App")),
  body: AdaptiveScaffold(
    smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
    mediumBreakpoint: const WidthPlatformBreakpoint(begin: 700, end: 1000),
    largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
    useDrawer: true,
    // 需将AdaptiveScaffold内部的appBar设为null，避免重复渲染
    appBar: null,
    selectedIndex: _selectedTab,
    onSelectedIndexChange: (int index) {
      setState(() {
        _selectedTab = index;
      });
    },
    destinations: const <NavigationDestination>[
      NavigationDestination(
        icon: Icon(Icons.inbox_outlined),
        selectedIcon: Icon(Icons.inbox),
        label: 'Inbox',
      ),
      NavigationDestination(
        icon: Icon(Icons.article_outlined),
        selectedIcon: Icon(Icons.article),
        label: 'Articles',
      ),
      NavigationDestination(
        icon: Icon(Icons.chat_outlined),
        selectedIcon: Icon(Icons.chat),
        label: 'Chat',
      ),
      NavigationDestination(
        icon: Icon(Icons.video_call_outlined),
        selectedIcon: Icon(Icons.video_call),
        label: 'Video',
      ),
      NavigationDestination(
        icon: Icon(Icons.home_outlined),
        selectedIcon: Icon(Icons.home),
        label: 'Home',
      ),
    ],
    body: (_) => GridView.count(crossAxisCount: 2, children: children),
    smallBody: (_) => ListView.builder(
      itemCount: children.length,
      itemBuilder: (_, int idx) => children[idx],
    ),
    secondaryBody: (_) => Container(
      color: const Color.fromARGB(255, 234, 158, 192),
    ),
    smallSecondaryBody: AdaptiveScaffold.emptyBuilder,
  ),
)

方法二：自定义大屏布局配置 #

通过largeLayoutConfiguration和mediumLayoutConfiguration强制在大屏模式下保留AppBar，需自定义布局的topNavigationSlot：

AdaptiveScaffold(
  smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
  mediumBreakpoint: const WidthPlatformBreakpoint(begin: 700, end: 1000),
  largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
  useDrawer: true,
  appBar: AppBar(title: const Text("My App")),
  selectedIndex: _selectedTab,
  onSelectedIndexChange: (int index) {
    setState(() {
      _selectedTab = index;
    });
  },
  // 配置大屏布局，强制保留AppBar的独立显示
  largeLayoutConfiguration: const AdaptiveLayoutConfiguration(
    topNavigationSlot: AdaptiveLayoutSlot.none,
    navigationRailConfiguration: NavigationRailConfiguration(
      extended: true,
    ),
  ),
  // 配置中屏布局，同样保留AppBar
  mediumLayoutConfiguration: const AdaptiveLayoutConfiguration(
    topNavigationSlot: AdaptiveLayoutSlot.none,
  ),
  destinations: const <NavigationDestination>[
    NavigationDestination(
      icon: Icon(Icons.inbox_outlined),
      selectedIcon: Icon(Icons.inbox),
      label: 'Inbox',
    ),
    NavigationDestination(
      icon: Icon(Icons.article_outlined),
      selectedIcon: Icon(Icons.article),
      label: 'Articles',
    ),
    NavigationDestination(
      icon: Icon(Icons.chat_outlined),
      selectedIcon: Icon(Icons.chat),
      label: 'Chat',
    ),
    NavigationDestination(
      icon: Icon(Icons.video_call_outlined),
      selectedIcon: Icon(Icons.video_call),
      label: 'Video',
    ),
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      selectedIcon: Icon(Icons.home),
      label: 'Home',
    ),
  ],
  body: (_) => GridView.count(crossAxisCount: 2, children: children),
  smallBody: (_) => ListView.builder(
    itemCount: children.length,
    itemBuilder: (_, int idx) => children[idx],
  ),
  secondaryBody: (_) => Container(
    color: const Color.fromARGB(255, 234, 158, 192),
  ),
  smallSecondaryBody: AdaptiveScaffold.emptyBuilder,
)

说明 #

• 方法一优势在于简单直接，完全独立控制AppBar的显示逻辑，不受AdaptiveScaffold默认布局规则限制。
• 方法二更贴合AdaptiveScaffold的设计逻辑，通过配置布局插槽调整显示，但需注意不同断点下的布局兼容性。

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