Flutter 在颤振中，如何创建具有磨砂玻璃效果的滑动条？

我想创建一个类似于苹果新闻应用程序的顶部应用程序栏

在屏幕截图中看到模糊有点困难，因为条太薄了，但是你知道了

我希望滚动条可以扩展和收缩，收缩时固定在顶部，就像在屏幕截图中一样，SliverAppBar可以完成所有这些，但我不能用ClipRect、BackdropFilter和不透明来创建磨砂玻璃效果，因为CustomScrollView只接受RenderShiver子类

我的测试代码：

Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        title: Text('SliverAppBar'),
        elevation: 0,
        floating: true,
        pinned: true,
        backgroundColor: Colors.grey[50],
        expandedHeight: 200.0,
        flexibleSpace: FlexibleSpaceBar(
            background: Image.network("https://i.imgur.com/cFzxleh.jpg", fit: BoxFit.cover)
        ),
      )
      ,
      SliverFixedExtentList(
        itemExtent: 150.0,
        delegate: SliverChildListDelegate(
          [
            Container(color: Colors.red),
            Container(color: Colors.purple),
            Container(color: Colors.green),
            Container(color: Colors.orange),
            Container(color: Colors.yellow),
            Container(color: Colors.pink,
              child: Image.network("https://i.imgur.com/cFzxleh.jpg", fit: BoxFit.cover)
            ),
          ],
        ),
      ),
    ],
  );
}

小部件构建（构建上下文）{
返回自定义滚动视图(
条子：[
滑杆(
标题：文本（“滑动条”），
海拔：0，
浮动：是的，
对,，
背景颜色：颜色。灰色[50]，
扩展高度：200.0，
flexibleSpace:FlexibleSpaceBar(
背景：Image.network（“https://i.imgur.com/cFzxleh.jpg，安装：BoxFit.盖）
),
)
,
SliverFixedExtentList(
项目范围：150.0，
委托：SliverChildListDelegate(
[
容器（颜色：颜色。红色），
容器（颜色：颜色。紫色），
容器（颜色：颜色。绿色），
容器（颜色：颜色。橙色），
容器（颜色：颜色。黄色），
容器（颜色：Colors.pink，
子项：Image.network（“https://i.imgur.com/cFzxleh.jpg，安装：BoxFit.盖）
),
],
),
),
],
);
}

---

有没有办法实现我想要的

我通过将

AppBar

包装在

SliverPersistentHeader

中（这基本上就是

SliverAppBar

所做的），成功地实现了它的功能

忽略未模糊的边缘，这是一个iOS模拟器错误

下面是一个概念验证代码示例：

类半透明SliveRappbar扩展无状态小部件{
@凌驾
小部件构建（构建上下文）{
回程滑动头(
浮动：是的，
对,，
代表：_半透明的百叶窗(
MediaQuery.of（context.padding），
)
);
}
}
类_半透明SliverAppBarDelegate扩展SliverPersistentHeaderDelegate{
///这是计算钢筋高度所必需的
最终边缘设置安全区域填充；
_半透明的百叶窗（此为安全区域填充）；
@凌驾
double get minExtent=>safeAreaPadding.top；
@凌驾
double get maxExtent=>minExtent+kToolbarHeight；
@凌驾
小部件构建（BuildContext上下文、双收缩偏移、布尔重叠内容）{
返回ClipRect（子项：BackdropFilter(
过滤器：ImageFilter.blur（sigmaX:16，sigmaY:16），
子对象：不透明度(
不透明度：0.93，
子：容器(
//不要将其包装在任何SafeArea小部件中，而是使用填充
填充：仅限边缘设置（顶部：safeAreaPadding.top），
高度：最大范围，
颜色：颜色，白色，
//使用堆栈和定位创建向上滚动时的工具栏向上滑动效果
子：堆栈(
溢出：overflow.clip，
儿童：[
定位(
底部：0，左侧：0，右侧：0，
孩子：AppBar(
主要：错误，
海拔：0，
背景颜色：颜色。透明，
标题：文本（“半透明应用程序栏”），
),
)
],
)
)
)
));
}
@凌驾
布尔应该重建（_translucentsliverappbardelegateold）{
返回maxExtent！=old.maxExtent | | minExtent！=old.minExtent||
safeAreaPadding！=旧的。safeAreaPadding；
}
}