Flutter：如何对DecorationImage进行无缩放裁剪？

问题本质 #

你遇到的警告是因为图片按原始尺寸（2700×1965）解码后，仅显示其中1124×2436的区域，导致内存浪费。ClipRect、SizedBox这类组件是在图片绘制完成后裁剪，无法避免全尺寸解码的内存开销；而ResizeImage会缩放图片，不符合你仅裁剪的需求。

可行解决方案：手动裁剪解码（无缩放） #

通过dart:ui的图片API，在解码阶段直接裁剪出需要的区域，避免全尺寸加载。

步骤1：实现裁剪工具函数

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';

// 从Asset中裁剪指定区域并返回MemoryImage
Future<MemoryImage> cropAssetImage(String assetPath, Rect cropRect) async {
  // 加载Asset字节数据
  final ByteData data = await rootBundle.load(assetPath);
  // 初始化解码器，指定目标尺寸为裁剪区域的尺寸
  final ui.Codec codec = await ui.instantiateImageCodec(
    data.buffer.asUint8List(),
    targetWidth: cropRect.width.ceil(),
    targetHeight: cropRect.height.ceil(),
  );
  final ui.FrameInfo frameInfo = await codec.getNextFrame();
  final ui.Image originalImage = frameInfo.image;

  // 创建画布绘制裁剪后的区域
  final ui.PictureRecorder recorder = ui.PictureRecorder();
  final ui.Canvas canvas = ui.Canvas(recorder);
  // 绘制原图的指定区域到目标画布（无缩放）
  canvas.drawImageRect(
    originalImage,
    cropRect, // 原图中要裁剪的区域
    Rect.fromLTWH(0, 0, cropRect.width, cropRect.height), // 输出尺寸
    Paint(),
  );

  // 生成裁剪后的图片并转为MemoryImage
  final ui.Picture picture = recorder.endRecording();
  final ui.Image croppedImage = await picture.toImage(
    cropRect.width.ceil(),
    cropRect.height.ceil(),
  );
  final ByteData? croppedData = await croppedImage.toByteData(format: ui.ImageByteFormat.png);
  
  return MemoryImage(croppedData!.buffer.asUint8List());
}

步骤2：在Widget中使用裁剪后的图片

根据你的屏幕尺寸和图片尺寸计算裁剪区域（示例为居中裁剪宽度，纵向取全图高度，若图片高度不足则从顶部开始）：

FutureBuilder<MemoryImage>(
  future: cropAssetImage(
    'assets/pic.jpg',
    // 计算裁剪区域：横向居中裁剪1124宽度，纵向取2436高度（图片高度不足则从顶部取）
    Rect.fromLTWH(
      (2700 - 1124) / 2, // x起始坐标
      0, // y起始坐标
      1124,
      2436,
    ),
  ),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: snapshot.data!,
            fit: BoxFit.fill,
          ),
        ),
      );
    } else {
      return const CircularProgressIndicator(); // 加载中占位
    }
  },
)

说明 #

• 该方法在解码阶段就只处理需要的裁剪区域，不会加载全尺寸图片，彻底消除内存警告。
• 裁剪过程无缩放，仅提取原图的指定区域，完全符合你的需求。

内容的提问来源于stack exchange，提问作者DevShark