如何让 AppBar 从顶部滑动并覆盖屏幕内容，就像 inshorts app bar

Question

我正在尝试让 AppBar 从顶部滑动并在屏幕点击时显示，然后在 10 秒后隐藏。

我目前是通过基于布尔变量值显示 Appbar 来实现的，它也能正常工作，但是当 AppBar 出现时，屏幕会调整大小以适合 AppBar。我希望我的屏幕保持原样并且 AppBar 只是覆盖在屏幕上，就像横幅一样。

_showAppBar(bool val) {
        setState(() {
          if (val) {
            _barVisible = true;
            print("show");
          }
          else {
            _barVisible = false;
            print("hide");
          }
        });
      }

Widget build(BuildContext context) {
    return Theme(
        data: getCurrentTheme(),
        child: Scaffold(
            key: _scaffoldKey,
            appBar: _barVisible ? buildAppBar():null,
            body: buildBody()
        ));
  }

buildAppBar() {
    Color accentColor = currentSelectedTheme == MyThemes.defaultLight ? Colors.white : getAccentColor();
    return AppBar(
      leading: Text(appBarTitle, style: TextStyle(color: accentColor)),
      actions: <Widget>[
        IconButton(
            icon: Icon(
                _nightMode ? Icons.lightbulb_outline : Icons.brightness_2
            ),
            padding: EdgeInsets.fromLTRB(0.0, 0.0, 16.0, 0.0),
            iconSize: 32.0,
            onPressed: () => print("hi")
      ],
    );
  }

Answer 1

Scaffold 不会帮助您实现您的目标。请改用 Stack 中的 AppBar。尝试这样的事情：

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: getCurrentTheme(),,
      child: Scaffold(
          key: _scaffoldKey,
          body: Stack(
            children: <Widget>[
              buildBody(),
              /*Below is the new AppBar code. Without Positioned widget AppBar will fill entire screen*/
              Positioned( 
                top: 0.0,
                left: 0.0,
                right: 0.0,
                child: _barVisible ? buildAppBar() : Container(width: 0, height: 0,),
                /*You can't put null in the above line since Stack won't allow that*/
              )
            ],
          )
      ),
    );
  }

其余代码将保持不变。如果有帮助，请告诉我！

如何让 AppBar 从顶部滑动并覆盖屏幕内容，就像 inshorts app bar

How do I make the AppBar slide from top and overlay the screen content, just like inshorts app bar

flutter

flutter-layout

flutter-animation