ExtendedImage库实现长图片自适应宽度与滚动浏览方案

问题背景

在使用Flutter开发应用时，经常会遇到需要展示长图片的场景。这类图片的特点是高度远大于宽度，但需要完整展示图片内容。常规的图片展示方式往往无法同时满足以下两个需求：

1. 图片宽度完美适配屏幕宽度
2. 支持上下滚动浏览完整图片内容

常见错误实现方式

很多开发者首先会尝试使用SingleChildScrollView包裹ExtendedImage组件，虽然这样能实现滚动效果，但会导致图片的缩放手势功能失效。另一种常见错误是直接设置BoxFit.fitWidth，这会导致图片只占据屏幕左侧一小部分空间。

正确解决方案

核心思路

通过ExtendedImage库的GestureConfig配置，精确计算初始缩放比例(initialScale)，使图片宽度刚好匹配屏幕宽度，同时保留垂直滚动能力。

实现步骤

1. 移除BoxFit.fitWidth设置：不再使用强制宽度适配，改为手动计算缩放比例

2. 计算初始缩放比例：需要根据图片实际尺寸和屏幕宽度计算合适的缩放值

3. 配置手势参数：设置合理的缩放范围，确保用户体验良好

代码实现

ExtendedImage.network(
  imageUrl,
  mode: ExtendedImageMode.gesture,
  initGestureConfigHandler: (ExtendedImageState state) {
    final imageSize = state.extendedImageInfo?.image.size;
    if (imageSize == null) {
      return GestureConfig(
        inPageView: true,
      );
    }
    
    final screenWidth = MediaQuery.of(context).size.width;
    final initialScale = screenWidth / imageSize.width;
    
    return GestureConfig(
      minScale: initialScale * 0.9,  // 允许稍微缩小
      maxScale: initialScale * 3.0,  // 允许放大3倍
      initialScale: initialScale,    // 初始缩放使宽度匹配屏幕
      inPageView: true,
      initialAlignment: InitialAlignment.center,
    );
  },
)

技术原理

1. 图片尺寸获取：通过state.extendedImageInfo?.image.size获取图片原始尺寸

2. 缩放比例计算：用屏幕宽度除以图片原始宽度，得到使图片宽度刚好匹配屏幕的缩放比例

3. 缩放范围设置：基于初始缩放比例设置最小和最大缩放范围，保持操作自然

4. 手势保留：这种方式不会干扰ExtendedImage原有的手势系统，仍支持双指缩放等操作

注意事项

1. 图片加载状态处理：在实际应用中应添加加载状态判断，避免在图片未加载完成时计算尺寸

2. 错误处理：添加对imageSize为null情况的处理，保证应用稳定性

3. 性能优化：对于特别长的图片，考虑使用缓存机制提高加载速度

4. 横屏适配：如果需要支持横竖屏切换，应监听屏幕方向变化并重新计算缩放比例

扩展应用

这种方案不仅适用于网络图片，同样适用于本地图片资源。对于需要展示多张长图片的场景，可以结合PageView使用，为用户提供更好的浏览体验。

通过正确配置ExtendedImage的手势参数，开发者可以轻松实现长图片的完美展示效果，既保证了图片内容的完整呈现，又提供了流畅的交互体验。