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

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

相关推荐
kurcp29 分钟前
vue3 antdesign上传解析excel
前端·typescript·excel
旭久1 小时前
前端下载文件时浏览器右上角没有保存弹窗及显示进度,下载完之后才会显示保存弹窗的问题定位及解决方案
前端
excel1 小时前
webpack 模块 第 一 节
前端
excel1 小时前
webpack 格式化模块 第 七 节
前端
好_快2 小时前
Lodash源码阅读-dropRight
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-drop
前端·javascript·源码阅读
程序猿chen3 小时前
安全岗の夺命连环问:(第壹篇)从XSS到0day的灵魂拷问
前端·git·安全·面试·跳槽·xss·改行学it
前端_yu小白4 小时前
js异步机制
前端·javascript·async·promise·await·js异步·回调地狱
Spider Cat 蜘蛛猫4 小时前
chrome extension开发框架WXT之WXT Storage api解析【补充说明一】
前端·javascript·chrome
程序猿John7 小时前
ES6 新增特性 箭头函数
前端·javascript·es6