Flutter中计算文字的宽度/高度

我们在需求开发的过程中，往往会有计算文字宽度和高度的要求，遗憾的是Flutter并没有提供计算文字宽/高的方法，无意中看到 Magic旭 大神的 Flutter-如何计算文字宽高 一文，通过TextPainter曲线救国来实现文字宽/高的计算，下面具体的实现代码：

static Size boundingTextSize(String text, TextStyle style,  {int maxLines = 2^31, double maxWidth = double.infinity}) {
  if (text == null || text.isEmpty) {
    return Size.zero;
  }
  final TextPainter textPainter = TextPainter(
      textDirection: TextDirection.ltr,
      text: TextSpan(text: text, style: style), maxLines: maxLines)
    ..layout(maxWidth: maxWidth);
  return textPainter.size;
}

通过上面的代码相信大家应该已经看明白了其中的原理了，这个思路非常巧妙，利用了TextPainter类的layout()方法来计算文字的宽/高。再深入layout()的源代码中可以看到最终是由ui.Paragraph的layout()调用native的方法完成宽度和高度计算的，如下图：

TextPainter的layout()方法实现

ui.Paragraph的layout()方法实现

既然是由native的方法来计算宽度和高度的，因此我们也可以得出，在不同的平台上获取到的字符串宽度和高度是不一样的。但是同平台不同的机型的计算结果是否会有差异呢？在Magic旭在文章中提到，在华为手机中遇到计算不准确的问题，需求传入当前的Locale对象才能准确计算，目前这个问题我还没有遇到，希望各位遇到这个问题的同学在评论区反馈一下具体的机器型号和系统版本号，兼容华为手机的版本如下：

static Size boundingTextSize(BuildContext context, String text, TextStyle style,  {int maxLines = 2^31, double maxWidth = double.infinity}) {
  if (text == null || text.isEmpty) {
    return Size.zero;
  }
  final TextPainter textPainter = TextPainter(
      textDirection: TextDirection.ltr,
      locale: Localizations.localeOf(context, nullOk: true),
      text: TextSpan(text: text, style: style), maxLines: maxLines)
    ..layout(maxWidth: maxWidth);
  return textPainter.size;
}

兼容版本在上一个版本中增加了传入Locale对象，您可能会奇怪，为什么我不一开始就拿出来这个兼容版本呢，原因在于BuildContext这个参数会大大限制使用的场景，您可能会在项目中增加了一个GlobalStatic.context这样的全局变量，这样就可以摆脱BuildContext施加的场景限制了，这么做很好，没有问题。唯一不足的是限制了方法的移植性，方法粘贴到项目中还需要改造一下才能使用。因此综合评估后，我还是决定提供了一个移植性更好，但可能存在不足的方法，交由您来自己决定如何改造。

结语

再次感谢Magic旭大神带给我们的解决问题的方案和思路，最有价值的就是解决问题的思路，下面我们简单回顾一下Magic旭大神的解题思路：

1. 思考整个框架中哪里会有用到计算文字宽度和高度的地方，可以定位到RichText和Text等组件，并从中选取一个阅读代码找答案。
2. 在RichText组件可以找到TextPainter，从TextPainter中width和height变化的地方，仅通过width关键字就可以找到layout()方法
3. 写Demo创建TextPainter，调用layout()方法验证自己的猜想。

以上解题思路运用的好可以帮助我们解决很多开发过程中遇到的难题，也是我们成为大神的必经之路。