Flutter-如何计算文字宽高

07/10 13:18
阅读数 2.1K

场景

在某些业务上,可能我们需要计算多段文字的高度,达到动态适配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函数里面主要做的事情:一、构建好开发者定义的Text。二、根据开发者传入的maxWidth做限宽操作。三、把所有参数与计算交给ui.Paragraph(ParagraphXXX开头都是native C++代码)C++来做跨平台处理了。

  3. 看下TextPainter的height是怎么来的?由下图可以看出还是离不开ui.Paragraph变量。所以上面第一、第二步只是把参数告知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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。




展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部