Flutter中PageView的BackdropFilter滚动溢出父范围该怎么限制？

BackdropFilter 基于离屏图层合成实现模糊效果，默认不会自动遵循父组件的布局边界做绘制裁切。在 PageView 的滚动场景中，超出当前 Page 逻辑范围的模糊内容会直接绘制到相邻页面的图层上，最终表现为模糊效果跨页面溢出。

最直接的处理方式是给包含 BackdropFilter 的页面内容外层包裹 ClipRect 组件，强制将整个页面的绘制范围限制在自身尺寸边界内，阻断模糊效果向相邻页面的溢出。

修改后的核心代码片段：

class Page extends StatelessWidget {
  final String text;

  const Page({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 新增 ClipRect 作为外层约束裁切范围
    return ClipRect(
      child: Stack(
        children: [
          Text(_getRandomString(6000)),
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
            child: Container(color: Colors.black.withOpacity(0.1)),
          ),
          Center(
            child: Text(
              text,
              style: Theme.of(context).textTheme.headline2,
            ),
          ),
        ],
      ),
    );
  }
}

• 若页面需要带圆角的裁切效果，可替换为 ClipRRect 并设置对应圆角参数即可，核心逻辑都是通过Clip系列组件强制开启绘制裁切。
• 不要依赖普通容器组件的尺寸属性对 BackdropFilter 做边界约束，由于图层合成的执行顺序，这类普通约束不会作用于模糊效果的绘制范围，必须通过显式的Clip组件才能生效。

内容的提问来源于stack exchange，提问作者Илья Имхолинкс