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

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

相关推荐
恋猫de小郭1 小时前
Flutter 3.50 & Dart 3.14 发布,快来看看有什么更新吧
android·前端·flutter
非优秀程序员9 小时前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员9 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员9 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员9 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员9 小时前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
曦樂~13 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马13 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮13 小时前
经典打砖块(Breakout)游戏
前端·css·css3