面试题：Flutter 高级图像渲染差异优化

可能原因分析

图像分辨率与设备像素比：
- iOS 设备通常具有较高的设备像素比（devicePixelRatio）。如果图像资源的分辨率没有根据 iOS 设备的高像素比进行适配，可能导致图像拉伸，从而出现模糊。例如，在 Android 上使用的图像资源分辨率对于其设备像素比刚好合适，但在 iOS 高像素比设备上就显得分辨率不足。
- Flutter 中获取设备像素比的方式：可以通过 MediaQuery.of(context).devicePixelRatio 获取。
图像缓存策略：
- iOS 设备的缓存机制与 Android 可能不同。如果 Flutter 应用在 iOS 上的图像缓存策略不合理，比如缓存的图像尺寸或分辨率不匹配，可能导致模糊。例如，缓存了低分辨率的图像，在需要高分辨率图像时没有重新加载合适的资源。
- Flutter 中 ImageCache 类负责管理图像缓存。可以通过 ImageCache 的 evict、evictAll 等方法来控制缓存行为。
绘制策略：
- iOS 的绘制引擎与 Android 有所差异。在 Flutter 中，如果绘制图像时使用的 Paint 对象设置不当，例如 filterQuality 属性在 iOS 上没有正确配置，可能会影响图像的渲染质量。filterQuality 决定了图像在缩放或旋转时的过滤质量。
- Paint 的 filterQuality 取值有 FilterQuality.none、FilterQuality.low、FilterQuality.medium、FilterQuality.high。在 iOS 上可能需要设置为 FilterQuality.high 以获得更好的渲染效果。
图像格式支持：
- iOS 对某些图像格式的支持可能与 Android 不同。如果应用中使用了不被 iOS 良好支持的图像格式，在渲染时可能出现问题导致模糊。例如，WebP 格式在 Android 上广泛支持，但在 iOS 上原生支持有限，若未进行合适的转换处理可能出现问题。
- 可以在构建应用时，将图像格式转换为 iOS 更友好的格式，如 PNG 或 JPEG。

解决思路

检查图像分辨率：
- 确定 iOS 设备的像素比，并根据不同的像素比提供合适分辨率的图像资源。例如，可以在 assets 目录下创建不同分辨率的图像文件夹，如 assets/images/1x、assets/images/2x、assets/images/3x 等，分别存放不同分辨率的图像，然后在 Flutter 中根据设备像素比加载相应的图像。
- 使用 AssetImage 加载图像时，可以通过 Image.asset 的 scale 参数来适配不同的设备像素比。例如：

Image.asset(
  'assets/images/image.png',
  scale: MediaQuery.of(context).devicePixelRatio,
)

优化图像缓存：
- 分析应用中的图像缓存策略，确保缓存的图像是合适分辨率和尺寸的。可以在图像加载时，根据设备像素比和图像的原始分辨率，判断是否需要重新加载新的图像到缓存中。
- 例如，在自定义的图像加载逻辑中，可以先检查缓存中是否有合适的图像：

final cache = PaintingBinding.instance.imageCache;
final key = AssetBundleImageKey(
  bundle: rootBundle,
  name: 'assets/images/image.png',
  scale: MediaQuery.of(context).devicePixelRatio,
);
final cachedImage = cache.getImage(key);
if (cachedImage == null) {
  // 加载新图像并放入缓存
  final newImage = await Image.asset('assets/images/image.png', scale: MediaQuery.of(context).devicePixelRatio).image;
  cache.putIfAbsent(key, () => newImage);
}

调整绘制策略：
- 在绘制图像时，检查并设置合适的 Paint 对象的 filterQuality 属性。例如：

CustomPaint(
  painter: MyPainter(),
);

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
     ..filterQuality = FilterQuality.high;
    // 绘制图像逻辑
    canvas.drawImage(image, offset, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

检查图像格式：
- 如果应用中使用了不常见的图像格式，将其转换为 iOS 支持良好的格式。可以在构建过程中使用工具进行格式转换，或者在应用启动时进行动态转换（虽然这种方式可能会影响性能）。例如，使用 flutter_image 等插件来动态转换图像格式。

星途面试题库

面试题：Flutter 高级图像渲染差异优化

知识考点

面试题答案

可能原因分析

解决思路