【问题标题】：How to Disable the Blur Effect When Collapsing a `SliverAppBar` in a `CustomScrollView`如何在“CustomScrollView”中折叠“SliverAppBar”时禁用模糊效果
【发布时间】：2020-03-12 00:57:24
【问题描述】：

1。背景

我正在尝试制作一个顶部有一些空白空间的ListView，以便用户可以将顶部卡片带到屏幕底部，在那里她可以用拇指轻松访问它们。正如this other StackOverflow question 中所讨论的，我无法使用普通的ListView 来实现这一点，所以我切换到了它的父级CustomScrollView。

但是，在添加顶部 SliverAppBar 后，当我快要折叠它时，空间会模糊成更深的灰色阴影，如下图所示。如何禁用此效果？

2。守则

我目前使用的 `SliverAppBar 是：

SliverAppBar(
  automaticallyImplyLeading: false, // gets rid of the back arrow
  expandedHeight: 250, // the collapsible space you want to use 
  flexibleSpace: FlexibleSpaceBar(
    background: Container(
      color: Colors.transparent
    ),
  ),
),

我也尝试修改我的flexibleSpace: FlexibleSpaceBar，但似乎没有用：

flexibleSpace: FlexibleSpaceBar(
  title: AnimatedOpacity(
    opacity: 0.0,
    duration: Duration(seconds: 1),
  ),
  collapseMode: CollapseMode.none,
  stretchModes: [
    StretchMode.fadeTitle,
  ],
  background: Container(color: Colors.grey[850]),
),

【问题讨论】：

我在您的屏幕截图中看不到模糊的位置。你能分享一张开始折叠之前的截图吗？
在屏幕截图中可以看到模糊的。这是顶部黑卡和顶部条之间的不同灰度（不同于整体背景）。
你试过增加SliverAppBar的高度吗？例如 (SliverAppBar(elevation: 100.0),),

标签： listview flutter customscrollview

【解决方案1】：

SliverList 的默认背景颜色似乎是主题的 canvasColor。我已经设法通过在 FlexibleSpaceBar 背景上的容器上使用该主题颜色来匹配颜色：

FlexibleSpaceBar(
  background: Container(
    alignment: Alignment.center,
    color: Theme.of(context).canvasColor,
  ),
)

【讨论】：