颤抖的折叠容器

Question

我正在将应用程序从nativ android迁移到flutter。我正努力在我的flutter应用程序中实现一个“崩溃的容器”。

我的第一部分有背景图片和一些按钮，当屏幕滚动到标签栏时，我想折叠这些按钮。当我到达标签栏时，滚动停止，然后可以滚动浏览每个标签的内容。

有一个小gif显示我正在努力实现的目标：

我看过很多使用SilverAppBar的教程，但是我不确定将容器强加到appbar内是最好的方法。

您对我如何实现这一目标有任何想法吗？

Answer 1

在 Android 中， CollapsingToolbar UI组件位于设计支持库中，而在iOS中则没有官方的UI组件，但是有一些库可以帮助我们照着做。 为了在Flutter中执行相同的操作，我们需要将名为SliverAppBar的小部件与FlexibleSpaceBar一起用作子级。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Collapsing Toolbar",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  )),
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"),
        ),
      ),
    );

有关更多信息，请访问here