Flutter中如何实现字体点数与逻辑像素的相互转换？

核心概念澄清 #

• Flutter中Text组件的fontSize参数默认使用逻辑像素，字体点数（pt）是印刷领域单位，定义为1pt = 1/72英寸。
• 二者不存在固定硬编码比例，因为设备像素密度（DPI）、系统文本缩放设置都会影响实际渲染效果。

精确转换方法 #

1. 字体点数转逻辑像素 #

通过MediaQuery获取系统文本缩放因子，结合物理单位定义计算：

double ptToLogicalPixel(double pt, BuildContext context) {
  final textScaleFactor = MediaQuery.of(context).textScaleFactor;
  // 基础比例：1pt对应1/72英寸，Flutter逻辑像素在160dpi下对应1/160英寸，比例为160/72
  const baseRatio = 160 / 72;
  return pt * baseRatio * textScaleFactor;
}

2. 逻辑像素转字体点数 #

反向计算即可：

double logicalPixelToPt(double logicalPixel, BuildContext context) {
  final textScaleFactor = MediaQuery.of(context).textScaleFactor;
  const baseRatio = 160 / 72;
  return logicalPixel / (baseRatio * textScaleFactor);
}

Stack+CustomPaint布局的实践建议 #

• 若在CustomPaint中绘制文本，直接使用TextPainter并同步Text组件的配置，可完全对齐渲染效果，无需手动转换：

void paint(Canvas canvas, Size size) {
  final textPainter = TextPainter(
    text: TextSpan(
      text: "示例文本",
      style: TextStyle(fontSize: 16), // 与Text组件fontSize一致（逻辑像素单位）
    ),
    textDirection: TextDirection.ltr,
    textScaleFactor: MediaQuery.of(context).textScaleFactor,
  )..layout();
  
  // 绘制到Stack指定位置，与Text组件坐标对齐
  textPainter.paint(canvas, Offset(10, 10));
}

• 如需基于字体尺寸计算布局位置，优先使用TextPainter.layout()后的size属性，它直接返回逻辑像素单位的文本尺寸，可避免转换误差。

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