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不会帮助您实现所需的目标。在AppBar中使用Stack。尝试这样的事情：

  @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从顶部滑动并覆盖屏幕内容，就像短裤应用程序栏一样

1 个答案: