场景
在某些业务上，可能我们需要计算多段文字的高度，达到动态适配ListView高度的目的，满足我们产品的优（bian）秀（tai）需求。在android原生层大家都知道有各种手段可以计算文字的宽、高等，例如paint.layout等等手段。但在flutter中，虽然并没有直接提供API供开发者使用，但和android原生一样，只有看下RichText的源码就可以发现其中奥妙。
源码分析
RichText分析(Text等文本实现都一致)
-
文本实现最重要的是RenderParagraph类，官网备注 A render object that displays a paragraph of text，大概意思就是这个类用作文案展示的。再继续看构造函数发现了我们非常熟悉的老朋友TextPainter（和Android老朋友是不是也差不多），那么我们的TextPainter是否也有layout函数呢？let me see。
layout函数 上面我们可以看到，layout函数里面主要做的事情：一、构建好开发者定义的Text。二、根据开发者传入的maxWidth做限宽操作。三、把所有参数与计算交给ui.Paragraph（ParagraphXXX开头都是native C++代码）C++来做跨平台处理了。
-
看下TextPainter的height是怎么来的？由下图可以看出还是离不开ui.Paragraph变量。所以上面第一、第二步只是把参数告知Paragraph的native层，然后委托flutter engine进行计算。最后我们flutter通过painter直接访问Paragraph的各种属性变量。
画笔的高度
如何计算文字高度（本文重点）
这里很感谢[zhouxiaofu]为我指出文字高度计算提到错误地方，详细看评论。
///value: 文本内容；fontSize : 文字的大小；fontWeight：文字权重；maxWidth：文本框的最大宽度；maxLines：文本支持最大多少行 ；locale：当前手机语言；textScaleFactor：手机系统可以设置字体大小（默认1.0）
static double calculateTextHeight(
String value, fontSize, FontWeight fontWeight, double maxWidth, int maxLines) {
value = filterText(value);
TextPainter painter = TextPainter(
///AUTO：华为手机如果不指定locale的时候，该方法算出来的文字高度是比系统计算偏小的。
locale: WidgetsBinding.instance!.window.locale,
maxLines: maxLines,
textDirection: TextDirection.ltr,
textScaleFactor: textScaleFactor //字体缩放大小
text: TextSpan(
text: value,
style: TextStyle(
fontWeight: fontWeight,
fontSize: fontSize,
)));
painter.layout(maxWidth: maxWidth);
///文字的宽度:painter.width
return painter.height;
}
static String filterText(String text) {
String tag = '<br>';
while (text.contains('<br>')) {
// flutter 算高度,单个\n算不准,必须加两个
text = text.replaceAll(tag, '\n\n');
}
return text;
}
遇到相关问题
-
在上面代码AUTO注解下的locale不传值时候（locale：当前国家语言），在华为手机上计算的高度与系统layout后文本布局的高度不一致，计算的值比文本真实布局后的文本高度偏小，不同华为机型这个偏小的值还不一致。
机型：华为 mate 9 -
为什么不传递locale时候会只有对华为机型有影响呢？这个我暂时还不清楚，但是我们能从flutter的注解中可以看出，locale的属性就是为了辨别不同国家对同个文字展示不同而存在的。
官网对于locale的注解
