flutter开发实战-TextPainter计算文本内容的宽度

flutter开发实战-TextPainter计算文本内容的宽度

最近开发过程中根据Text文本的大小判断是否需要进行显示跑马灯效果,获取文本的大小,需要TextPainter来获取Size

一、TextPainter

TextPainter主要用于实现文本的绘制。TextPainter类可以将TextSpan渲染到画布上

TextPainter可以将TextSpan树绘制到Canvas画布上。

使用步骤

  • 1 创建[TextSpan]树并将其传递给[TextPainter]
  • 2 调用[layout]来准备段落
  • 3 根据需要随时调用paint来绘制段落。
  • 4 当对象将不再被访问以释放Dispose时调用[display]

二、TextPainter计算文本的宽度

在我使用的TextSpan,指定Text与style,通过TextPainter中的size的到大小,再获取文本内容的宽度

dart 复制代码
Size calculateTextSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
        text: TextSpan(text: text, style: style),
        maxLines: 1,
        textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }

三、小结

flutter开发实战-TextPainter计算文本内容的宽度。TextPainter类可以将TextSpan渲染到画布,并根据TextPainter来获得文本内容的宽度。

学习记录,每天不停进步。

相关推荐
zhuà!7 小时前
腾讯地图TMap标记反显,新增标记
前端·javascript·vue.js
未知原色7 小时前
web worker使用总结(包含多个worker)
前端·javascript·react.js·架构·node.js
ttod_qzstudio7 小时前
CSS改变图片颜色方法介绍
前端·css
curdcv_po8 小时前
我接入了微信小说小程序官方阅读器
前端·微信小程序
程序员鱼皮8 小时前
什么是 RESTful API?凭什么能流行 20 多年?
前端·后端·程序员
www_stdio8 小时前
让大语言模型拥有“记忆”:多轮对话与 LangChain 实践指南
前端·langchain·llm
inferno8 小时前
JavaScript 基础
开发语言·前端·javascript
cindershade8 小时前
Intersection Observer 的实战方案
前端
青莲8438 小时前
Kotlin Flow 深度探索与实践指南——中部:实战与应用篇
android·前端
cindershade8 小时前
事件委托(Event Delegation)的原理
前端