时间戳

首页 > 解决方案 > 透明重叠应用栏

flutter - 透明重叠应用栏

问题描述

我正在尝试找到一种方法来拥有一个与页面内容重叠的透明应用栏。我知道我可以使用 SliverAppBar 最初显示 appbar，然后在滚动时让它滑出视图，这很好。我什至可以给它一个透明的背景颜色。但是，当您滚动到页面顶部时，它总是为栏腾出空间位于页面内容上方。

我想要的是页面内容与页面顶部齐平，就好像没有应用栏一样，然后像 SliverAppBar 一样让透明的应用栏滑入视图，这样我就只有一些操作按钮与顶部重叠的页面。

我怎样才能做到这一点？有没有办法堆叠 appbar 或更改边距以便不占用空间？

标签： flutterflutter-sliverflutter-appbar

解决方案

您可以将脚手架和您的“页面”放在 a 中stack()，确保脚手架是堆栈中的最后一项。您可以自己为应用栏添加动画，甚至可以使用 sliver 应用栏，只要确保为应用栏和内容使用相同的滚动控制器即可。

例如：

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        // Your content
        Container(
          color: Colors.pink,
        ),

        Scaffold(
          appBar: AppBar(
            title: Text("heading"),
            bottom: AppBar(
              title: Text("footer"),
            ),
          ),
        ),
      ],
    );
  }

推荐阅读