Flutter-如何计算文字宽高

场景

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

画笔的高度

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

///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.widthreturn painter.height;}

遇到相关问题

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

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

Flutter-如何计算文字宽高相关推荐

Android 测量文字宽高
前言最近自定义控件,需要绘制文本,用到了获取文本宽高的代码,在此做下记录. Paint.measureText() 获取文本宽度 Paint paint = new Paint();paint.se ...
动态计算Label的宽高+文字设置
iOS7之后苹果推荐使用boundingRectWithSize:的方法来计算文字的宽高,使用这个方法就能动态计算文字的宽高,而不用自己去预算文字需要多宽多高下面,我们就具体看看这个方法如何使用: ...
java精确测量文本高度_Android精确测量文本宽高及基线位置的方法
前言笔者最近在做一款弹幕控件,里面涉及到绘制文本,以及文本边框.而绘制文本边框需要知道文本的左边位置,上边位置,以及文本的宽高. 通常来说,使用 Canvas 绘制文本,可以通过画笔 Paint 来 ...
iOS_根据文字字数动态确定Label宽高
iOS7中用以下方法 CGSize 替代过时的iOS6中的- (CGSize)sizeWithFont:(UIFont *)font 方法 // iOS7_API_根据文字字数动态确定Label宽高 ...
iOS 让UIButton根据文字内容自动计算宽高
Xcode自带的UIButton控件是没有办法根据文字内容计算自身的宽和高的,下面演示一下问题, 我用代码方式创建一个UIButton,并且设置了一些属性,下面看一下效果图一切都是这么的美好,跟我们 ...
Flutter设置Container的最大最小宽高
Flutter中设置Container宽高可直接通过width和height属性来设置:如下 Container(width: 100,height: 100,color: Colors.red,ch ...
Flutter显示图片原始宽高
参考 AsperctRaioImage具体代码: import 'dart:async'; import 'dart:io'; import 'dart:typed_data'; import 'pa ...
不定宽高的div中文字垂直居中
最近公司的项目里面有个要调样式的页面 , 可能是很长很长时间没有写过css样式方面的东西了.吐槽一下我自己,只是一个简单的界面就让我苦恼了很久需求:在不定宽高的div中文字垂直居中 div1的宽高 ...
Flutter使用ScreenUtil获取屏幕宽高初始化报错
报错如下原因我们在布局中使用ScreenUtil().screenWidth获取屏幕宽度是,在初始化未装载视图时,第一次获取时拿不到,会出现如上的崩溃. 解决方案 import 'package: ...

Flutter-如何计算文字宽高

Flutter-如何计算文字宽高相关推荐

最新文章

热门文章