Question

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

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

我该如何实现？有没有一种方法可以堆叠应用栏或更改边距，以免占用空间？

Answer 1

您只需将脚手架和您的“页面”放在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"),
            ),
          ),
        ),
      ],
    );
  }

透明的重叠应用栏

1 个答案: