Flutter-如何计算文字宽高

场景

在某些业务上，可能咱们须要计算多段文字的高度，达到动态适配ListView高度的目的，知足咱们产品的优（bian）秀（tai）需求。在android原生层你们都知道有各类手段能够计算文字的宽、高等，例如paint.layout等等手段。但在flutter中，虽然并无直接提供API供开发者使用，但和android原生同样，只有看下RichText的源码就能够发现其中奥妙。

---

源码分析

RichText分析(Text等文本实现都一致)

1. 文本实现最重要的是RenderParagraph类，官网备注 A render object that displays a paragraph of text，大概意思就是这个类用做文案展现的。再继续看构造函数发现了咱们很是熟悉的老朋友TextPainter（和Android老朋友是否是也差很少），那么咱们的TextPainter是否也有layout函数呢？let me see。

    

   layout函数

2. 上面咱们能够看到，layout函数里面主要作的事情：1、构建好开发者定义的Text。2、根据开发者传入的maxWidth作限宽操做。3、把全部参数与计算交给ui.Paragraph（ParagraphXXX开头都是native C++代码）C++来作跨平台处理了。

3. 看下TextPainter的height是怎么来的？由下图能够看出仍是离不开ui.Paragraph变量。因此上面第1、第二步只是把参数告知Paragraph的native层，而后委托flutter engine进行计算。最后咱们flutter经过painter直接访问Paragraph的各类属性变量。

    

   画笔的高度

如何计算文字高度（本文重点）

 

///value: 文本内容；fontSize : 文字的大小；fontWeight：文字权重；maxWidth：文本框的最大宽度；maxLines：文本支持最大多少行  
static double calculateTextHeight(
      String value, fontSize, FontWeight fontWeight, double maxWidth, int maxLines) {
    value = filterText(value);
    TextPainter painter = TextPainter(
        ///AUTO：华为手机若是不指定locale的时候，该方法算出来的文字高度是比系统计算偏小的。
        locale: Localizations.localeOf(GlobalStatic.context, nullOk: true),
        maxLines: maxLines,
        textDirection: TextDirection.ltr,
        text: TextSpan(
            text: value,
            style: TextStyle(
              fontWeight: fontWeight,
              fontSize: fontSize,
            )));
    painter.layout(maxWidth: maxWidth);
    ///文字的宽度:painter.width
    return painter.height;
  }

---

遇到相关问题

1. 在上面代码AUTO注解下的locale不传值时候（locale：当前国家语言），在华为手机上计算的高度与系统layout后文本布局的高度不一致，计算的值比文本真实布局后的文本高度偏小，不一样华为机型这个偏小的值还不一致。

    

   机型：华为 mate 9

2. 为何不传递locale时候会只有对华为机型有影响呢？这个我暂时还不清楚，可是咱们能从flutter的注解中能够看出，locale的属性就是为了辨别不一样国家对同个文字展现不一样而存在的。

    

做者：Magic旭 连接：https://www.jianshu.com/p/f713e5a36da5 来源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。