Flutter不同设备上图片叠加文字位置偏移问题咨询

你的问题出在用屏幕宽高而非图片实际渲染尺寸来计算文字位置。因为你给图片设置了BoxFit.fitWidth，图片会根据屏幕宽度等比缩放，图片的高度和屏幕高度没有固定比例关系，所以用MediaQuery.of(context).size.height计算top值，必然会导致文字在不同设备上相对于图片的位置偏移。

下面是两种可靠的解决方法：

方法一：已知图片原始宽高比时的快速实现 #

如果提前知道图片的原始宽高（比如设计稿里的尺寸），可以直接用宽高比计算图片渲染后的高度，再基于图片的宽高来定位文字：

Stack(
  children: [
    Image.asset(
      'assets/images/letter.jpg',
      fit: BoxFit.fitWidth,
      width: double.infinity, // 让图片撑满父组件宽度
    ),
    LayoutBuilder(
      builder: (context, constraints) {
        // 替换成你的图片原始高宽比（高度/宽度）
        const double imageAspectRatio = 1.5; // 示例：图片高1500，宽1000
        double imageRenderHeight = constraints.maxWidth * imageAspectRatio;
        
        return Positioned(
          // 相对于图片宽度的15%
          left: 0.15 * constraints.maxWidth,
          // 相对于图片高度的73%
          top: 0.73 * imageRenderHeight,
          child: Text(
            'TEST',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              // 字体大小也基于图片宽度，保证缩放一致性
              fontSize: 0.02 * constraints.maxWidth,
            ),
          ),
        );
      },
    ),
  ],
)

方法二：动态获取图片尺寸（未知宽高比时） #

如果不知道图片的原始尺寸，可以通过ImageProvider动态获取图片信息，再计算位置：

// 先封装一个获取图片尺寸的方法
Future<Size> _getImageSize() async {
  final ImageProvider provider = AssetImage('assets/images/letter.jpg');
  final Completer<Size> completer = Completer();
  
  provider.resolve(const ImageConfiguration()).addListener(
    ImageStreamListener((ImageInfo info, bool _) {
      completer.complete(Size(
        info.image.width.toDouble(),
        info.image.height.toDouble(),
      ));
    }),
  );
  
  return completer.future;
}

// 在Widget中使用FutureBuilder渲染
@override
Widget build(BuildContext context) {
  return FutureBuilder<Size>(
    future: _getImageSize(),
    builder: (context, snapshot) {
      // 图片加载完成前显示占位
      if (!snapshot.hasData) return const SizedBox.shrink();
      
      final Size imageSize = snapshot.data!;
      final double imageAspectRatio = imageSize.height / imageSize.width;
      
      return Stack(
        children: [
          Image.asset(
            'assets/images/letter.jpg',
            fit: BoxFit.fitWidth,
            width: double.infinity,
          ),
          LayoutBuilder(
            builder: (context, constraints) {
              double imageRenderHeight = constraints.maxWidth * imageAspectRatio;
              return Positioned(
                left: 0.15 * constraints.maxWidth,
                top: 0.73 * imageRenderHeight,
                child: Text(
                  'TEST',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 0.02 * constraints.maxWidth,
                  ),
                ),
              );
            },
          ),
        ],
      );
    },
  );
}

这两种方法都是基于图片的实际渲染尺寸来计算文字位置，不管屏幕分辨率怎么变，文字都会固定在图片的相对位置上。

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