时间戳

首页 > 解决方案 > PageView 上 Stack 外的 BackdropFilter 覆盖

flutter - PageView 上 Stack 外的 BackdropFilter 覆盖

问题描述

滚动时看起来像 PageView 覆盖在 Page 外的 BackdropFilter。我希望它仅适用于父小部件。如何防止这种行为？

在此处输入图像描述

代码示例：

class PageViewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        itemCount: 6,
        itemBuilder: (context, index) => Page(text: 'Page $index'),
      ),
    );
  }
}

class Page extends StatelessWidget {
  final String text;

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

  @override
  Widget build(BuildContext context) {
    return 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,
          ),
        ),
      ],
    );
  }
}

Codepen 工作示例：https ://codepen.io/ioputin/pen/jOymamJ

标签： flutterflutter-pageview

解决方案

正如文件所说：

过滤器将应用于其父控件或祖先控件剪辑中的所有区域。如果没有剪辑，过滤器将应用于全屏。

所以我不得不用 ClipRect 包装 BackdropFilter

ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
            child: Container(color: Colors.black.withOpacity(0.1)),
          ),
        ),

推荐阅读