Flutter

Stella981
• 阅读 673

场景

在某些业务上,可能我们需要计算多段文字的高度,达到动态适配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。

     

    Flutter

    layout函数

  2. 上面我们可以看到,layout函数里面主要做的事情:一、构建好开发者定义的Text。二、根据开发者传入的maxWidth做限宽操作。三、把所有参数与计算交给ui.Paragraph(ParagraphXXX开头都是native C++代码)C++来做跨平台处理了。

  3. 看下TextPainter的height是怎么来的?由下图可以看出还是离不开ui.Paragraph变量。所以上面第一、第二步只是把参数告知Paragraph的native层,然后委托flutter engine进行计算。最后我们flutter通过painter直接访问Paragraph的各种属性变量。

     

    Flutter

    画笔的高度

如何计算文字高度(本文重点)

///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后文本布局的高度不一致,计算的值比文本真实布局后的文本高度偏小,不同华为机型这个偏小的值还不一致。

     

    Flutter

    机型:华为 mate 9

  2. 为什么不传递locale时候会只有对华为机型有影响呢?这个我暂时还不清楚,但是我们能从flutter的注解中可以看出,locale的属性就是为了辨别不同国家对同个文字展示不同而存在的。

     

    Flutter

作者:Magic旭
链接:https://www.jianshu.com/p/f713e5a36da5
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
Flutter 1.0 正式版: Google 的便携 UI 工具包
Flutter1.0正式版:Google的便携UI工具包文/TimSneath,GoogleDart&Flutter产品组产品经理Flutter是Google打造的UI工具包,通过一套代码同时在iOS和Android上构建媲美原生体验的精美应用!如今,移动开发者们在同时兼容iOS和Android
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这