Flutter点击屏幕显隐AppBar与底部导航栏，解决内容上移问题

你的问题出在直接将appBar和bottomNavigationBar设为null，这会导致Scaffold自动调整body的布局空间，填充原本导航栏占据的位置，从而让内容上移。要保持内容位置固定，核心思路是保留导航栏的占位空间，只控制导航栏内容的显示与隐藏。

下面是修改后的实现代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _showAppBar = true;
  bool _showBottomBar = true;

  // 复用Flutter内置的导航栏默认高度常量
  final double _appBarHeight = kToolbarHeight;
  final double _bottomBarHeight = kBottomNavigationBarHeight;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        // 用PreferredSize固定AppBar占位高度，仅控制内容显隐
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(_appBarHeight),
          child: Visibility(
            visible: _showAppBar,
            child: AppBar(title: const Text('My App')),
          ),
        ),
        // 底部导航栏用SizedBox固定高度，控制内容显隐
        bottomNavigationBar: SizedBox(
          height: _bottomBarHeight,
          child: Visibility(
            visible: _showBottomBar,
            child: BottomNavigationBar(items: const [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
              BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
            ]),
          ),
        ),
        body: GestureDetector(
          onTap: () {
            setState(() {
              _showAppBar = !_showAppBar;
              _showBottomBar = !_showBottomBar;
            });
          },
          child: Image.network('https://img.freepik.com/free-vector/funny-monkey-animal-cartoon-sticker_1308-75307.jpg?w=2000'),
        ),
      ),
    );
  }
}

关键修改说明： #

1. 保留导航栏占位：

   • AppBar使用PreferredSize指定固定高度（kToolbarHeight是Flutter内置的标准AppBar高度），配合Visibility组件仅控制AppBar内容的显示/隐藏，占位空间始终存在。
   • 底部导航栏用SizedBox固定高度（kBottomNavigationBarHeight是内置标准高度），同样通过Visibility控制内容显隐，避免布局塌陷。

2. 调整SafeArea位置：

   • 将SafeArea移到Scaffold外层，确保页面内容的安全内边距不受AppBar显隐的影响，内容位置始终固定。

如果需要隐藏导航栏时保留其交互能力（比如点击空白区域恢复显示），可以将Visibility替换为Opacity组件，设置opacity: _showAppBar ? 1 : 0即可，这样组件仍在树中，只是视觉上隐藏。

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