Flutter：使用CustomPainter确定偏移量的难点及图片适配实现需求

我完全懂你想要的效果——就是像你给的CSS示例那样，不依赖容器具体尺寸，用百分比控制图片的平移和缩放，让容器显示图片的特定区域对吧？之前用CustomPainter卡偏移量确实容易懵，我给你两个实用的方案，看哪个更适合你：

方案一：用Stack + Positioned快速实现（最贴近CSS写法） #

这个方法和你写的CSS逻辑几乎完全对应，不需要自定义绘制，上手最快：

ClipRect(
  child: SizedBox(
    width: 300,
    height: 300,
    child: Stack(
      children: [
        Positioned(
          // 对应CSS的 left: -5% → 容器宽度的-5%
          left: -300 * 0.05,
          // 对应CSS的 top: -10% → 容器高度的-10%
          top: -300 * 0.1,
          // 对应CSS的 width: 130% → 容器宽度的130%
          width: 300 * 1.3,
          // 图片用BoxFit.cover保证填满指定宽度，和CSS里的行为一致
          child: Image.asset('whatever.jpg', fit: BoxFit.cover),
        ),
      ],
    ),
  ),
)

如果想让这个逻辑不依赖硬编码的300px，可以用LayoutBuilder来获取容器的实际尺寸：

LayoutBuilder(
  builder: (context, constraints) {
    final containerWidth = constraints.maxWidth;
    final containerHeight = constraints.maxHeight;
    return ClipRect(
      child: Stack(
        children: [
          Positioned(
            left: containerWidth * -0.05,
            top: containerHeight * -0.1,
            width: containerWidth * 1.3,
            child: Image.asset('whatever.jpg', fit: BoxFit.cover),
          ),
        ],
      ),
    );
  },
)

方案二：用CustomPainter实现自定义绘制 #

如果一定要用CustomPainter，核心是把百分比偏移转换为基于容器尺寸的像素值，同时处理好图片的缩放逻辑：

首先定义CustomPainter：

class PercentImagePainter extends CustomPainter {
  final Image image;
  final double scaleFactor; // 对应CSS的width百分比（比如1.3对应130%）
  final double xOffsetPercent; // 比如-0.05对应-5%
  final double yOffsetPercent; // 比如-0.1对应-10%

  PercentImagePainter({
    required this.image,
    this.scaleFactor = 1.3,
    this.xOffsetPercent = -0.05,
    this.yOffsetPercent = -0.1,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 计算缩放后的图片宽高
    final scaledImgWidth = image.width.toDouble() * scaleFactor;
    final scaledImgHeight = image.height.toDouble() * scaleFactor;

    // 计算偏移量：基于容器尺寸的百分比转换为像素
    final offsetX = size.width * xOffsetPercent;
    final offsetY = size.height * yOffsetPercent;

    // 绘制图片到指定区域，ClipRect会自动裁剪超出容器的部分
    canvas.drawImageRect(
      image,
      Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
      Rect.fromLTWH(offsetX, offsetY, scaledImgWidth, scaledImgHeight),
      Paint(),
    );
  }

  @override
  bool shouldRepaint(PercentImagePainter oldDelegate) {
    return oldDelegate.image != image ||
        oldDelegate.scaleFactor != scaleFactor ||
        oldDelegate.xOffsetPercent != xOffsetPercent ||
        oldDelegate.yOffsetPercent != yOffsetPercent;
  }
}

然后使用的时候，记得先预加载图片（比如用ImageProvider获取Image对象）：

ClipRect(
  child: SizedBox(
    width: 300,
    height: 300,
    child: FutureBuilder<Image>(
      future: loadImage('assets/whatever.jpg'), // 自定义图片加载方法
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return CustomPaint(
            painter: PercentImagePainter(
              image: snapshot.data!,
              scaleFactor: 1.3,
              xOffsetPercent: -0.05,
              yOffsetPercent: -0.1,
            ),
          );
        }
        return const CircularProgressIndicator();
      },
    ),
  ),
)

// 简单的图片加载方法
Future<Image> loadImage(String path) async {
  final bytes = await rootBundle.load(path);
  final codec = await instantiateImageCodec(bytes.buffer.asUint8List());
  final frameInfo = await codec.getNextFrame();
  return frameInfo.image;
}

之前你遇到偏移量问题，大概率是没理清容器尺寸和图片缩放后尺寸的关系——CSS里的百分比是相对于容器的，所以在Flutter里不管用哪种方案，都要基于容器的宽高来计算偏移，而不是图片自身的尺寸。

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