ImageFiltered 与 BackdropFilter；有什么不同？

Question

ImageFiltered和之间有什么区别BackdropFilter，它们似乎都做同样的工作。我应该选择哪一个？

Answer 1

ImageFiltered比使用更简单，BackdropFilter如果您只想将过滤器应用于您的子窗口小部件，也建议使用。

与在底层小部件顶部BackdropFilter应用过滤器（使用其属性）不同，仅在小部件上应用过滤器。为了更好地理解，请考虑以下示例。childImageFilteredchild

您会发现，在 的情况下ImageFiltered，滤镜将应用于图像本身。然而，在这种情况下BackdropFilter（这通常与 a 一起使用，Stack但我在 中使用它Column），child（此处的BackdropFilter文本）会绘制在背景（Flutter 图像）上。

还值得注意的是，我将两个滤镜都包裹起来，ClipRRect以防止模糊从容器盒中出来。

class FooPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          Text('ImageFiltered'),
          ClipRRect(
            child: ImageFiltered(
              imageFilter: _imageFilter,
              child: _image, // Above image filter is applied on the child itself.  
            ),
          ),
          SizedBox(height: 20),
          ClipRRect(
            child: Container(
              width: double.maxFinite,
              height: 200,
              decoration: BoxDecoration(image: DecorationImage(image: _image.image)), // Background
              child: BackdropFilter(
                filter: _imageFilter,
                child: Center(child: Text('BackdropFilter')), // Foreground
              ),
            ),
          ),
        ],
      ),
    );
  }

  Image get _image => Image.asset(flutterImage);

  ImageFilter get _imageFilter => ImageFilter.blur(sigmaX: 10, sigmaY: 10);
}