抖动模糊图像边缘不受影响(仅限 iOS)

Question

当对图像应用 ImageFilter.blur 时，图像的边缘没有变化。

如何将模糊扩展到边缘？

import 'dart:ui';
import 'package:flutter/material.dart';

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
          fit: BoxFit.cover,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: Container(
          decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
        ),
      ),
    );
  }
}

Answer 1

这可能不是您想听到的，也可能是=D。您看到的问题是 Skia 的软件渲染器存在模糊问题。除非您专门打开软件渲染，否则您不会在 Android 模拟器上看到相同的问题，也不会在使用硬件渲染的实际设备上看到同样的问题。

这是在我的 iPhone 上:

如果您真的需要模糊才能在模拟器中正常工作，我建议您将 +1 添加到 this issue或使用上图在 flutter repo 中创建一个新问题(在我链接到的问题中，他们似乎看到了不一致，而不是你所观察到的，尽管我认为修复会解决你所看到的以及)。

我认为一个不需要为模拟器修复错误的解决方案是可能的......理论上你可以使用溢出来使模糊至少超出屏幕边缘的大小模糊，然后让图像偏移与溢出相同的量，并将同一图像的副本翻转到屏幕边界之外，以便模糊上的着色是正确的......但这似乎有点矫枉过正=D。