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

Question

我对条子应用栏及其内容有一些问题。当我向下滚动 SliverList 的内容（在下面的代码中）时，我想调整 flexSpace 中图像的大小，以使图像适合列表中的顶部元素。

现在，我有这个（在这里保持拖动位置）：单击

我想提出类似的东西（并在拖动结束时弹回到初始的 ExpandHeight）：单击

老实说，我对如何使用 sliver 应用栏实现此行为没有任何想法，任何帮助将不胜感激！

这是我的代码

  @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: true，添加BouncingScrollPhysics()到CustomScrollView，同时stretchMode: [StretchMode.zoomBackground]在FlexibleSpaceBarwidget中添加如下所示；

  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(),
          ],
        ),
      )
    ],
  ),