Flutter SliverAppBar 内容在向下滚动时调整大小

Question

我在 sliver 应用栏及其内容方面遇到了一些问题。当我向下滚动 SliverList 的内容(在下面的代码中)时，我想调整 flexibleSpace 中的图像大小，以适应列表顶部元素的图像。

现在，我有这个(在这里保持拖动位置):click

我想想出类似的东西(并在拖动结束时弹回到初始的 expandedHeight):click

老实说，我对如何使用 sliver app bar 实现这种行为没有任何想法，我们将不胜感激!

这是我的代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(slivers: [
        SliverAppBar(
          elevation: 0,
          expandedHeight: 360,
          floating: false,
          pinned: false,
          snap: false,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: false,
              title: Text('Running running'),
              background: Image.asset(
                'assets/images/excercise_3.jpg',
                fit: BoxFit.cover,
              )),
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          _TopInfo(),
          _MainContent(),
        ]))
      ]),
    );
  }

Answer 1

在SliverAppBar中启用拉伸(stretch)属性stretch: true，将BouncingScrollPhysics()添加到CustomScrollView，同时添加stretchMode: [StretchMode.zoomBackground] 在 FlexibleSpaceBar 小部件中，如下所示；

  CustomScrollView(
    physics: const BouncingScrollPhysics(),
    slivers: [
      SliverAppBar(
        elevation: 0,
        expandedHeight: 360,
        floating: false,
        pinned: false,
        snap: false,
        stretch: true,
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: false,
          stretchModes: [StretchMode.zoomBackground],
          title: Text('Running running'),
          background: Image.asset(
            'assets/images/excercise_3.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate(
          [
            _TopInfo(),
            _MainContent(),
          ],
        ),
      )
    ],
  ),