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

【问题标题】：Flutter SliverAppBar content resize on scroll downFlutter SliverAppBar 内容在向下滚动时调整大小
【发布时间】：2021-03-21 07:02:39
【问题描述】：

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

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

我想想出类似的东西（并在拖动结束时弹回初始的 expandHeight）：click

Tbh，我对如何使用 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(),
        ]))
      ]),
    );
  }

【问题讨论】：

标签： flutter dart

【解决方案1】：

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

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

【讨论】：