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

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

相关推荐
于冬恋8 分钟前
Web后端开发(请求、响应)
前端
red润14 分钟前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js
Fly-ping15 分钟前
【前端】vue3性能优化方案
前端·性能优化
curdcv_po16 分钟前
前端开发必要会的,在线JS混淆加密
前端
天生我材必有用_吴用18 分钟前
深入理解JavaScript设计模式之单例模式
前端
LuckySusu18 分钟前
【HTML篇】DOCTYPE 声明:掌握浏览器渲染模式的关键
前端·html
Darling哒19 分钟前
HTML块拖拽交换
前端
码农之王20 分钟前
(一)TypeScript概述和环境搭建
前端·后端·typescript
葬送的代码人生31 分钟前
React组件化哲学:如何优雅地"变秃也变强"
前端·javascript·react.js
用户527096487449033 分钟前
🚀 前端项目代码质量配置Prettier + Commitlint + Husky + Lint-staged
前端