Flutter中Container设图片同高度却显示更大？真实设备像素解惑

核心原因是单位不匹配：图片详情显示的1920是物理像素，而Flutter代码里height:1920用的是逻辑像素（设备独立像素）。

具体说明 #

• 图片的1920高度：是图片本身包含的物理像素数量，对应屏幕上实际的发光点总数。
• Flutter的height参数：默认采用逻辑像素，这个单位是设备无关的，目的是让不同像素密度的设备呈现一致的视觉大小。Flutter会根据设备的devicePixelRatio（物理像素与逻辑像素的比值），将逻辑像素转换为物理像素渲染到屏幕上。
  比如主流手机的devicePixelRatio通常是2或3，那你设置的1920逻辑像素，实际渲染的物理像素就是1920×2=3840或1920×3=5760，远大于图片的1920物理像素，所以视觉上Container会比图片高很多。

验证方式 #

你可以在代码中打印当前设备的像素密度来确认：

print(MediaQuery.of(context).devicePixelRatio);

实现Container与图片高度一致的方法 #

如果要让Container的物理像素高度和图片匹配，需要把图片的物理像素值转换成逻辑像素：

// 获取设备像素密度
double dpr = MediaQuery.of(context).devicePixelRatio;
// 将图片物理高度转换为逻辑像素
double targetHeight = 1920 / dpr;

Container(
  color: Colors.yellow,
  width: 300,
  height: targetHeight,
)

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