自定义FlexibleSpaceBar小部件

Question

我希望标题位于图片下方，并且与图片合拢...

我取得的成就

home: Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(

       expandedHeight: 220.0,
        floating: true,
        pinned: true,
        snap: true,
        elevation: 50,
        backgroundColor: Colors.pink,
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            title: Text('Title',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                )),
            background: Image.network(
              'https://images.pexels.com/photos/443356/pexels-photo-443356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
              fit: BoxFit.cover,
            )
        ),
      ),
      new SliverList(
          delegate: new SliverChildListDelegate(_buildList(50))
      ),
    ],
  ),

我想要什么

感谢帮助

Answer 1

我希望我还不算太晚，我的回答将对您有所帮助。

如果检查flexibleSpace参数类型，则会注意到它占用了任何Widget。

因此您可以创建自己的窗口小部件，并将标题从SliverAppBar移至NewFlexibleSpaceWidget。

此外，您可以检查FlexibleSpaceBar，以了解Flutter开发团队如何实施它。

当我们缩小或扩大SliverAppBarWidget时，它会改变BoxConstraints的{​​{1}}，因此这意味着我们可以通过使用FlexibleSpace来获得新的高度LayoutBuilder。我们可以用它们来绘制动画。

BoxConstraints