Flutter如何实现仅部分页面显示适配正常的AppBar、其余页面不显示

你遇到的适配问题核心是多层Scaffold嵌套导致的安全区域计算异常：

1. 最外层App组件里多了一层无用的Scaffold，叠加Home组件的Scaffold、子页面的Scaffold，形成了三层嵌套结构
2. 内层子页面的Scaffold默认会把外层Scaffold的body区域当成全部可用区域，不会自动处理状态栏的间距，所以会出现AppBar顶到状态栏的问题，加固定边距自然无法适配不同设备。

把AppBar的控制权上提到持有底部导航的Home层，动态控制显隐，避免嵌套Scaffold，同时保留全局静态底部导航栏。

改造步骤 #

1. 先删除App组件里多余的外层Scaffold
2. 将Home改为StatefulWidget，维护当前页面索引和各页面的AppBar显隐配置
3. 子页面仅保留内容逻辑，不需要单独包Scaffold和AppBar

改造后代码示例 #

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: OneContext().builder,
      // 去掉多余的外层Scaffold，直接指向Home
      home: const Home(),
    );
  }
}

// 页面配置类，统一管理各页面的AppBar显隐和自定义配置
class PageConfig {
  final Widget content;
  final bool showAppBar;
  final AppBar? customAppBar;

  const PageConfig({
    required this.content,
    this.showAppBar = false,
    this.customAppBar,
  });
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 当前选中的底部导航索引
  int _currentNavIndex = 0;
  // 所有底部导航对应的页面配置，按需扩展
  final List<PageConfig> _pageList = [
    PageConfig(
      content: const PageWithAppBarContent(),
      showAppBar: true,
      customAppBar: AppBar(title: const Text("带AppBar的页面")),
    ),
    PageConfig(
      content: const PageWithoutAppBarContent(),
      showAppBar: false,
    ),
  ];

  // 底部导航切换时调用该方法更新索引
  void onNavChange(int index) {
    setState(() {
      _currentNavIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final currentPage = _pageList[_currentNavIndex];
    return Scaffold(
      // 动态控制AppBar显隐，不需要时传null即可隐藏
      appBar: currentPage.showAppBar ? currentPage.customAppBar : null,
      body: currentPage.content,
      bottomNavigationBar: Nav.instance,
    );
  }
}

// 原带AppBar的页面，仅保留内容逻辑
class PageWithAppBarContent extends StatelessWidget {
  const PageWithAppBarContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

// 原不带AppBar的页面，仅保留内容逻辑
class PageWithoutAppBarContent extends StatelessWidget {
  const PageWithoutAppBarContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

如果你确实需要子页面自行控制AppBar逻辑，可以给内层Scaffold的AppBar加上动态状态栏边距，不需要写死固定值：

class PageWithAppbar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      child: Scaffold(
        appBar: PreferredSize(
          // 动态获取当前设备状态栏高度，加到AppBar的总高度里
          preferredSize: Size.fromHeight(kToolbarHeight + MediaQuery.of(context).padding.top),
          child: Padding(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: AppBar(),
          ),
        ),
        body: Container(),
      ),
    );
  }
}

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