Flutter：滚动ListView时BackdropFilter模糊效果异常求助

方案1：关闭ListView的边缘裁剪 #

ListView默认会裁剪超出可视区域的子组件内容，这会导致BackdropFilter的模糊扩散部分被切掉。只需给ListView添加clipBehavior: Clip.none，允许子组件绘制到可视区域外：

return ListView.builder(
  scrollDirection: Axis.horizontal,
  clipBehavior: Clip.none, // 新增该行
  itemCount: 5,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10),
      width: 100,
      child: Stack(
        children: [
          Container(
            height: 50,
            width: 100,
            color: Colors.red,
            margin: EdgeInsets.symmetric(vertical: 20),
          ),
          Container(
            height: 50,
            width: 100,
            child: ClipRRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                child: Container(),
              ),
            ),
          )
        ],
      ),
    );
  },
);

方案2：给ListView预留模糊空间 #

如果不想完全关闭裁剪，可给ListView添加与模糊半径匹配的padding，让模糊效果有足够的绘制空间，再用外层ClipRRect统一裁剪多余区域：

return ClipRRect(
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    padding: EdgeInsets.symmetric(horizontal: 20), // 与sigmaX值对应
    itemCount: 5,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        width: 100,
        child: Stack(
          children: [
            Container(
              height: 50,
              width: 100,
              color: Colors.red,
              margin: EdgeInsets.symmetric(vertical: 20),
            ),
            Container(
              height: 50,
              width: 100,
              child: ClipRRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                  child: Container(),
                ),
              ),
            )
          ],
        ),
      );
    },
  ),
);

原理说明 #

BackdropFilter的模糊效果会向组件四周扩散，当滚动到ListView首尾时，默认的边缘裁剪会切掉扩散到可视区域外的模糊部分，导致视觉上模糊消失。两种方案分别通过取消裁剪或预留绘制空间，确保模糊效果完整展示。

内容的提问来源于stack exchange，提问作者Bùi Thanh Hải