dart 在屏幕上显示和隐藏AppBar点击Flutter

mw3dktmi  于 2022-12-27  发布在  Flutter
关注(0)|答案(4)|浏览(296)

第一节第一节第一节第一节第一次
我想像上面的图片。我想创建一个应用程序,将隐藏和显示应用程序的应用程序栏和底部栏屏幕上点击。
所以我用SetState方法试了一下,效果很好,但问题是只有这个方法
当应用程序栏隐藏应用程序内容上升,但我希望我的内容应该是固定的。

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'),
        ),
      ),
    );
  }
}
j5fpnvbx

j5fpnvbx1#

您可以使用首选大小的小部件,而不是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),
),
pu82cl6c

pu82cl6c2#

如果你点击小工具的应用程序栏是隐藏你的应用程序栏是隐藏成功,但你返回它空,请改变这一点,希望它对你的帮助。

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'),
        ),
      ),
    );
  }
}
xcitsw88

xcitsw883#

Padding Package 整个body,并在隐藏appBarbottomNavigationBar时切换它,如下所示:

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'),
          ),
        ),
      ),
    );
  }
}
w6mmgewl

w6mmgewl4#

试试这样做

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

然后正常显示或隐藏应用程序栏。使用动画效果更平滑。
添加extendBodyBehindAppBar: true将确保在显示或隐藏appbar时主体不会上下移动。

相关问题