Flutter Widget 之 ImageFiltered

Flutter提供了ImageFiltered，它是个能获取像素，并加以重排的低级类。 您可以从dart.ui导入它。

例如 ImageFilter.blur就有模糊一起的作用

import 'dart.ui';

ImageFilter.blur()

ImageFilter.matrix让您能设置矩阵变换、缩放、平移、倾斜和旋转

要将ImageFiltered应用在小部件最容易的方式就是使用ImageFiltered

只需将目标小部件包装起来以便ImageFiltered来过滤，并提供过滤器，以便过滤图像

.要做到模糊也很容易, 只需使用ImageFilter.blur并提供x个y方向的模糊量

ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 2),
    child: MyNormalWidget(),
);

ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 8),
    child: MyNormalWidget()
);

ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaY: 2),
    child: MyNormalWidget()
);

而矩阵变换的应用稍微复杂一点,若你绝顶聪明，你可以直接以float64列表类型这种方式来提供矩阵

ImageFiltered(
    imageFilter: ImageFilter.matrix(
        Float64List.fromList(
           [0, 1, 1, 1,
            1, 1, 1, 1,
            1, 0, 0, 1,
            1, 0, 1, 1]
        )
    ),
    child: MyNormalWidget(),
);

不过大多数人会选用vector_math所属的Matrix4类， 它提供Matrix4.rotationZ这类的构造函数

ImageFiltered(
    imageFilter: ImageFilter.matrix(
        Matrix4.rotationZ(0.2).storage,
    ),
    child: MyNormalWidget(),
);

最好记得在Flutter之下一起都是小部件,因此不只是图像，任何东西皆可过滤

ImageFiltered(
    imageFilter: ImageFilter.blur(),
    child: MyApp(),
)

BackdropFilter是与ImageFiltered类似的小部件

BackdropFilter允许您将过滤器应用在小部件绘制的内容而非针对小部件本身应用过滤器

BackdropFilter(
    filter: ImageFilter.blur(
        sigmaX: 5,
        sigmaY: 5,
    ),
);

不过，他的性能也较差，若用ImageFiltered便可实现目标效果,那就用ImageFiltered取代BackdropFilter，这样就行了。

ImageFiltered是中能模糊或变换应用程序像素的简单方式

如果想了解有关ImageFiltered的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址