Flutter跨设备实现固定2cm物理尺寸圆形的技术问询

要绘制在所有设备上保持2cm物理尺寸的圆形，你当前代码的核心问题是硬编码了160这个基准DPI值，这在iOS设备上会导致尺寸偏差（iOS的基准DPI为163）。以下是修正方案：

问题分析 #

• Android系统的基准DPI是160，iOS则为163，直接用160会让iOS上的圆形偏小。
• devicePixelRatio是物理像素与逻辑像素的比值，需要结合对应平台的基准DPI，才能计算出屏幕实际DPI。

修正代码 #

import 'dart:io' show Platform;
import 'package:flutter/material.dart';

class MyCircleWidgetCm extends StatefulWidget {
  const MyCircleWidgetCm({super.key});

  @override
  State<MyCircleWidgetCm> createState() => _MyCircleWidgetCmState();
}

class _MyCircleWidgetCmState extends State<MyCircleWidgetCm> {

  // 获取对应平台的基准DPI
  double _getBaseDpi() {
    if (Platform.isIOS) {
      return 163;
    } else {
      return 160;
    }
  }

  // 计算屏幕实际DPI
  double _getDPI(BuildContext context) {
    return View.of(context).devicePixelRatio * _getBaseDpi();
  }

  // 厘米转物理像素
  double _cmToPx(BuildContext context, double cm) {
    double dpi = _getDPI(context);
    return (cm / 2.54) * dpi; // 先将厘米转换为英寸，再转换为像素
  }

  @override
  Widget build(BuildContext context) {
    // 传入2，对应2cm的圆形尺寸
    double circleSize = _cmToPx(context, 2);

    return Center(
      child: Container(
        width: circleSize,
        height: circleSize,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
      ),
    );
  }
}

额外优化建议 #

如果需要更极致的准确性，可以通过原生通道（MethodChannel）直接获取系统提供的真实DPI值：

• Android：通过DisplayMetrics.xdpi获取横向真实DPI
• iOS：可通过UIScreen.main.nativeBounds与UIScreen.main.bounds的比值，结合设备型号对应的物理尺寸计算（但iOS官方未直接暴露屏幕物理尺寸，实现相对繁琐）

对于大多数业务场景，分平台设置基准DPI的方法已经足够保证圆形在不同设备上的物理尺寸基本一致。

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