flutter开发实战-TextPainter计算文本内容的宽度

这篇具有很好参考价值的文章主要介绍了flutter开发实战-TextPainter计算文本内容的宽度。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flutter开发实战-TextPainter计算文本内容的宽度

最近开发过程中根据Text文本的大小判断是否需要进行显示跑马灯效果,获取文本的大小,需要TextPainter来获取Size

flutter开发实战-TextPainter计算文本内容的宽度,移动开发,flutter开发实战,flutter,flutter,前端,TextPainter

一、TextPainter

TextPainter主要用于实现文本的绘制。TextPainter类可以将TextSpan渲染到画布上
TextPainter可以将TextSpan树绘制到Canvas画布上。
使用步骤

  • 1 创建[TextSpan]树并将其传递给[TextPainter]
  • 2 调用[layout]来准备段落
  • 3 根据需要随时调用paint来绘制段落。
  • 4 当对象将不再被访问以释放Dispose时调用[display]

二、TextPainter计算文本的宽度

在我使用的TextSpan,指定Text与style,通过TextPainter中的size的到大小,再获取文本内容的宽度

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来获得文本内容的宽度。
学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-640719.html

到了这里,关于flutter开发实战-TextPainter计算文本内容的宽度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java实战:高效提取PDF文件指定坐标的文本内容

    临时接到一个紧急需要处理的事项。业务侧一个同事有几千个PDF文件需要整理:需要从文件中的指定位置获取对应的编号和地址。 要的急,工作量大。所以就问到技术部有没有好的解决方案。 问技术的话就只能写个demo跑下了。 PDF的文档看起来比较简单,因为只是需要读取两

    2024年02月13日
    浏览(57)
  • Flutter父宽度自适应子控件的宽度

    需求: 控件随着金币进行自适应宽度 image.png 步骤: 1、Container不设置宽度,需要设置约束padding; 2、文本使用Flexible形式;

    2024年02月14日
    浏览(42)
  • flutter开发实战-多语言flutter intl

    flutter开发实战-多语言flutter intl 之前做的应用中有用到多语言,一直没有整理,这里整理一下多语言设置流程。 使用的是Android studio 使用Android studio安装flutter_intl 插件,更新或者安装flutter_intl 插件后会提示重新启动IDE。 如图所示: 在Android Studio中菜单Tools找到flutter intl创建

    2024年02月13日
    浏览(41)
  • uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度

    首先 :我使用的是uniapp+ vue3语法: 问题 : 我出现这个问题是IOS 设备发现的,data.boxWidth为0 代码: 原因: 使用了 uni.createSelectorQuery() 来获取元素的宽度,然后在回调函数中设置 data.boxWidth 的值。然而, uni.createSelectorQuery() 方法是异步的 ,也就是说,它会在后台进行元素查

    2024年02月13日
    浏览(57)
  • Android获取文本的宽度和高度

    方法一:先绘制文本所在的矩形区域,再获取矩形区域的宽度 上述方法由于矩形边框紧贴文字,所有没有多余的空间。 方法二:通过Paint的 measureText 方法直接测量文本宽度 此方法计算出的宽度会加上开始和结尾的空间,这个空间就是文字和文字之间的空间,为了美观而存在

    2024年02月09日
    浏览(51)
  • Vuepress样式修改内容宽度

    1、相关文件 一般所在目录node_modules@vuepresstheme-defaultstyleswrapper.styl 2、调整宽度,截图中是已经调整好的,在我电脑上显示刚刚好。

    2024年02月09日
    浏览(38)
  • css宽度适应内容

    废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应 方法有很多,如下 如下给父元素设置flex能实现宽度自适应内容 效果如下 但是这样有一个小缺点,那就是改变了父元素的display属性,我们仅仅是为了让box的宽度自适应内容,不应该去改变别的元素 所以我们可以

    2024年01月21日
    浏览(35)
  • flutter开发实战-inappwebview实现flutter与Javascript方法调用

    flutter开发实战-inappwebview实现flutter与Javascript方法调用 在使用inappwebview时候,需要flutter端与JS进行交互,调用相应的方法,在inappwebview中的JavaScript Handlers。 要添加JavaScript Handlers,可以使用InAppWebViewController.addJavaScriptHandler方法,在该方法中定义handlerName和JavaScript端调用它时要

    2024年02月03日
    浏览(47)
  • flutter开发实战-webview插件flutter_inappwebview使用

    flutter开发实战-webview插件flutter_inappwebview使用 在开发过程中,经常遇到需要使用WebView,Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter,flutter_inappwebview。之前整理了一下webview_flutter,查看https://blog.csdn.net/gloryFlow/article/details/131683122 这里我们使用fl

    2024年02月07日
    浏览(50)
  • flutter开发实战-MethodChannel实现flutter与iOS双向通信

    flutter开发实战-MethodChannel实现flutter与iOS双向通信 最近开发中需要iOS与flutter实现通信,这里使用的MethodChannel 如果需要flutter与Android实现双向通信,请看 https://blog.csdn.net/gloryFlow/article/details/132218837 这部分与https://blog.csdn.net/gloryFlow/article/details/132218837中的一致,这里实现一下

    2024年02月13日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包