Flutter中如何在不同屏幕尺寸的Stack组件内定位Text文本组件

你当前的适配方案存在两个核心错误：

• 直接使用全局屏幕尺寸（MediaQuery拿到的宽高）计算Stack内子组件的位置，Stack的实际可用大小会随设备屏幕、父容器布局变化，全局尺寸和Stack自身尺寸不匹配，自然会出现偏移
• 固定像素值（比如top:295、top:120这类写法）没有适配不同屏幕的密度和尺寸，在小屏/大屏设备上位置会完全错位

核心逻辑是：所有Stack内的位置计算都基于Stack自身的可用尺寸，而非全局屏幕尺寸，用LayoutBuilder组件可以拿到当前Stack的实时约束，基于这个约束按比例计算位置就能实现全设备适配。

修改后的核心代码示例：

Widget imageStack() {
  print("Width: " + (MediaQuery.of(context).size.width).toString());
  return AspectRatio(
    aspectRatio: 1,
    // 移除固定宽高的SizedBox，用LayoutBuilder获取当前容器真实尺寸
    child: LayoutBuilder(
      // 这里的constraints就是当前容器的真实可用宽高
      builder: (context, constraints) => Stack(
        alignment: Alignment.center,
        children: [
          // 用户上传的图片，位置按容器比例计算
          Positioned(
            top: constraints.maxHeight * 0.2, // 距离顶部为容器高度的20%，可自行调整比例
            child: Image(
              width: constraints.maxWidth * 0.6, // 宽度占容器的60%
              height: constraints.maxHeight * 0.5, // 高度占容器的50%
              fit: BoxFit.cover,
              image: NetworkImage(data['image']),
            ),
          ),
          // 边框模板图，填充满整个容器保证对齐
          Positioned.fill(
            child: Image(
              fit: BoxFit.contain,
              image: AssetImage('assets/images/fomat.png'),
            ),
          ),
          // 姓名字段，按比例定位
          Positioned(
            // 距离顶部为容器高度的65%，刚好落在红色框底部位置，可自行调整比例数值
            top: constraints.maxHeight * 0.65,
            child: Text(data['name'],
                style: GoogleFonts.poppins(
                  // 字体大小也按容器宽度比例适配
                  fontSize: constraints.maxWidth * 0.06,
                  fontWeight: FontWeight.w600,
                )),
          ),
          // 日期字段，按比例定位
          Positioned(
            top: constraints.maxHeight * 0.05,
            right: constraints.maxWidth * 0.05,
            child: Text(
              dob.toString(),
              style: GoogleFonts.lato(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                // 字体同样按比例适配
                fontSize: constraints.maxWidth * 0.04,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

• 如果需要更精细的多设备适配，可以引入flutter_screenutil三方库，统一按照设计稿的像素比例做全局适配
• 所有资源图片切多套分辨率（1x/2x/3x）放在对应的资源目录下，避免图片拉伸模糊

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