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来获得文本内容的宽度。

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

相关推荐
梦想CAD控件21 小时前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥21 小时前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
华仔啊21 小时前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保1 天前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~1 天前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
颜酱1 天前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611271 天前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo1 天前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁1 天前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青1 天前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序