在 Flutter 中點擊屏幕顯示和隱藏 AppBar

Question

我想要上面的圖片。 我想創建一個應用程序，它將隱藏和顯示應用程序屏幕點擊的應用程序欄和底部欄。

所以我通過 SetState 方法嘗試了它並且效果很好但問題僅在於此

當 AppBar 隱藏應用程序內容時，我希望我的內容應該被修復。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: Text('My App')) : null,
      bottomNavigationBar: _showBottomBar ? BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      ]) : null,
      body: SafeArea(
        child: 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'),
        ),
      ),
    );
  }
}

Answer 1

您可以使用首選大小的小部件而不是 appbar 如下代碼，然后您可以根據您的使用更改高度

appBar:_showAppBar 
? PreferredSize(
  preferredSize: const Size.fromHeight(100),
  child: Container(color: Colors.red) 
: PreferredSize(
  preferredSize: const Size.fromHeight(100),
  child: Container(color: Colors.transparent),
),

Answer 2

如果您單擊小部件，應用欄被隱藏您的應用欄已成功隱藏，但您將其返回 null 請更改下面的內容，希望對您有所幫助。

appBar: _showAppBar ? AppBar(title: Text('My App')) : AppBar(backgroundColor: Colors.transparent,),

完整代碼：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: Text('My App')) : AppBar(backgroundColor: Colors.transparent,),
      bottomNavigationBar: _showBottomBar ? BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      ]) : null,
      body: SafeArea(
        child: 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'),
        ),
      ),
    );
  }
}

Answer 3

用Padding包裹你的整個body ，當你隱藏appBar和bottomNavigationBar時切換它，如下所示：

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

  double appBarHeight = 56.0; // default appBar height

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar ? AppBar(title: Text('My App')) : null,
      bottomNavigationBar: _showBottomBar
          ? BottomNavigationBar(items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search), label: 'Search'),
            ])
          : null,
      body: Padding(
        padding: EdgeInsets.symmetric(vertical: _showAppBar ? 0 : appBarHeight),
        child: SafeArea(
          child: 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'),
          ),
        ),
      ),
    );
  }
}

Answer 4

嘗試這樣做

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,

然后正常顯示或隱藏appbar。 使用動畫以獲得更流暢的效果。

添加extendBodyBehindAppBar: true將確保在顯示或隱藏 appbar 時 body 不會向上或向下 go 。