颤振折叠容器

Shinbly 发表于 Dev

闪闪发光

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

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

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

倒塌的容器的gif

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

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

阳光明媚

在Android中，设计支持库中提供了CollapsingToolbar UI组件，而在iOS中，没有官方的UI组件，但是有一些库可以帮助我们做到这一点。为了在Flutter中执行相同的操作，我们需要将Widget和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"),
        ),
      ),
    );