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

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

相关推荐
陈随易14 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星15 小时前
javascript之事件代理/事件委托
前端
陈随易16 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
jiejiejiejie_17 小时前
Flutter for OpenHarmony 心情日记功能实战指南
flutter·华为
jiejiejiejie_18 小时前
Flutter for OpenHarmony 倒计时功能实战开发
flutter
Math_teacher_fan18 小时前
Flutter 跨平台开发实战:鸿蒙与音乐律动艺术(六)、Lissajous 利萨茹曲线:频率耦合的轨迹艺术
flutter·ui·数学建模·华为·harmonyos·鸿蒙系统
里欧跑得慢18 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
IT_陈寒19 小时前
Vue的这个响应式陷阱,我debug了一整天才爬出来
前端·人工智能·后端
kyriewen19 小时前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
liulian091619 小时前
Flutter for OpenHarmony 跨平台开发:秒表功能实战指南
flutter