Flutter/Dart中如何为Positioned组件设置像素或其他单位的left和top值

默认单位说明 #

Positioned 组件的 left、top、right、bottom 四个偏移属性的默认单位为 逻辑像素（独立像素），既不是百分比也不是物理像素。
逻辑像素是Flutter全局统一的默认长度单位，和设备物理像素的换算关系由当前设备的 devicePixelRatio 参数决定，比如普通2倍屏手机的devicePixelRatio为2，那么1逻辑像素就对应2个物理像素。

注意：Positioned属性原生不支持百分比单位，需要百分比定位的话要自行基于父容器尺寸换算。

不同单位的属性值设置方法 #

• 设置为物理像素值
  先获取当前设备的像素比，把你需要的物理像素值除以像素比就能得到要传入的逻辑像素值：

  // 示例：设置left为100物理像素
  final double targetPhysicalPx = 100;
  final double devicePxRatio = MediaQuery.of(context).devicePixelRatio;
  final double leftVal = targetPhysicalPx / devicePxRatio;
  
  Positioned(
    left: leftVal,
    top: 50, // 此处50为默认的50逻辑像素
    child: const SizedBox(width: 100, height: 100)
  )
  

• 设置为父容器百分比值
  借助LayoutBuilder获取父Stack容器的尺寸，再按比例换算即可：

  LayoutBuilder(
    builder: (context, parentConstraints) {
      // 获取父Stack的总宽高
      final parentWidth = parentConstraints.maxWidth;
      final parentHeight = parentConstraints.maxHeight;
      // 示例：left为父宽度20%，top为父高度10%
      final leftPercent = parentWidth * 0.2;
      final topPercent = parentHeight * 0.1;
      return Stack(
        children: [
          Positioned(
            left: leftPercent,
            top: topPercent,
            child: const ColoredBox(color: Colors.blue, child: SizedBox(width: 100, height: 100))
          )
        ],
      );
    }
  )
  

• 对接设计稿单位（比如750px宽标准设计稿）
  可以提前封装全局换算工具，直接把设计稿上的px值转为对应设备的逻辑像素，无需每次手动计算。

内容的提问来源于stack exchange，提问作者The Amateur Coder