如何获取Flutter中图片在设备屏幕上Contrast的当前显示尺寸？

以下几种方案可直接获取图片在屏幕上的实际渲染尺寸：

方法一：原图尺寸+布局约束计算（适用于等比例缩放场景） #

如果图片是按比例适配父容器宽度（比如fit: BoxFit.contain且宽度占满），可先获取原图宽高，再结合实际可用宽度计算缩放后的尺寸：

// 1. 获取原图尺寸
final imageProvider = AssetImage('assets/your_image.png'); // 替换为你的图片源
final imageStream = imageProvider.resolve(ImageConfiguration.empty);
imageStream.addListener(
  ImageStreamListener((ImageInfo info, bool _) {
    final originalWidth = info.image.width.toDouble();
    final originalHeight = info.image.height.toDouble();
    
    // 2. 获取当前可用宽度（示例为屏幕宽度，可根据实际布局调整）
    final availableWidth = MediaQuery.of(context).size.width;
    
    // 3. 计算缩放后的显示尺寸
    final scaleRatio = availableWidth / originalWidth;
    final displayHeight = originalHeight * scaleRatio;
    
    print('实际显示尺寸：${availableWidth.round()} * ${displayHeight.round()}');
  }),
);

方法二：GlobalKey直接读取渲染尺寸（通用场景） #

通过GlobalKey绑定Image组件，获取其渲染对象的实际尺寸：

final GlobalKey imageKey = GlobalKey();

// 在build方法中使用带key的Image组件
Image(
  key: imageKey,
  image: AssetImage('assets/your_image.png'),
  fit: BoxFit.contain,
  width: MediaQuery.of(context).size.width,
);

// 布局完成后读取尺寸
WidgetsBinding.instance.addPostFrameCallback((_) {
  final renderBox = imageKey.currentContext?.findRenderObject() as RenderBox?;
  if (renderBox != null) {
    final displaySize = renderBox.size;
    print('实际显示尺寸：${displaySize.width.round()} * ${displaySize.height.round()}');
  }
});

方法三：LayoutBuilder+FutureBuilder实时计算 #

利用LayoutBuilder获取父容器约束，结合原图尺寸实时计算显示尺寸：

LayoutBuilder(
  builder: (context, constraints) {
    final maxWidth = constraints.maxWidth;
    final imageProvider = AssetImage('assets/your_image.png');
    
    return FutureBuilder<ImageInfo>(
      future: imageProvider.resolve(ImageConfiguration.empty).first,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final originalWidth = snapshot.data!.image.width.toDouble();
          final originalHeight = snapshot.data!.image.height.toDouble();
          final scaleRatio = maxWidth / originalWidth;
          final displayHeight = originalHeight * scaleRatio;
          
          return Column(
            children: [
              Image(
                image: imageProvider,
                fit: BoxFit.contain,
                width: maxWidth,
              ),
              Text('实际显示尺寸：${maxWidth.round()} * ${displayHeight.round()}'),
            ],
          );
        }
        return CircularProgressIndicator();
      },
    );
  },
);

注意：如果使用BoxFit.cover、BoxFit.fill等非等比例缩放模式，方法一的计算逻辑不适用，此时优先使用方法二直接读取渲染后的实际尺寸。

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