Flutter RichText支持自定义文字背景

extended text 相关文章

  • Flutter RichText支持图片显示和自定义图片效果
  • Flutter RichText支持自定义文本溢出效果
  • Flutter RichText支持自定义文字背景
  • Flutter RichText支持特殊文字效果

之前介绍过了Extended text,老规矩上图

UI设计说,那个字可以加个卟呤卟呤闪闪的背景吗? 当然可以啊,没问题,我就去加,不就是TextStlye里面加个Background的吗?

那个啥。。我的中文字呢?

又试了试,把背景色改成半透明的,中文字终于出来了,但是

尼玛,这个顶部高亮是什么鬼

也不吐槽了,想看bug的去24335和24337 看看,这个问题是我发现,@吉原拉面 姐姐帮忙验证,然后我们2个都开了issue,然后我的被关了,只剩下小姐姐的(有内情吗)。那个我可以@吉原拉面 吗,就是那个网红程序猿 吉原拉面

对产品设计说

被怂为啥别人别的平台能做啊,不管,必须支持。于是我又去看了下issue,去年的issue,都快4个月了。。搞什么鬼,修不修? 算了,不修,老夫自己来画。。

文本里面加入图片我们做过了那么一切好像都是顺水成章的事情了。如果下面有哪里觉得讲的有点跳跃,请先看之前的那篇文章,谢谢。

先放出图

直接来到paint方法,还是循环找到BackgroundTextSpan

if (ts is BackgroundTextSpan) {var painter = ts.layout(_textPainter);Rect textRect = topLeftOffset & painter.size;Offset endOffset;if (textRect.right > rect.right) {int endTextOffset = textOffset + ts.toPlainText().length;endOffset = _findEndOffset(rect, endTextOffset);}ts.paint(canvas, topLeftOffset, rect, endOffset: endOffset);} else if (ts.children != null) {_paintSpecialTextChildren(ts.children, canvas, rect,textOffset: textOffset);}textOffset += ts.toPlainText().length;
复制代码

这里我们要注意,因为你拿到的BackgroundTextSpan并且使用TextPainter出来的只能知道它整个文字的高度长度,不能直接知道它是否换行了,是否里面的文字是否文本溢出了,所以当文本最右边大于整个文本的右边的时候,就说明这个换行或者溢出了。使用_findEndOffset方法,我们从BackgroundTextSpan的最后一个字的位置向前找,直到找出BackgroundTextSpan最后一个不是文字溢出的位置

Offset _findEndOffset(Rect rect, int endTextOffset) {Offset endOffset = getOffsetForCaret(TextPosition(offset: endTextOffset, affinity: TextAffinity.upstream),rect,);//overflowif (endOffset == null || (endTextOffset != 0 && endOffset == Offset.zero)) {return _findEndOffset(rect, endTextOffset - 1);}return endOffset;}
复制代码

找到之后就好办了,如果endOffset为null,说明可以直接画背景

  canvas.drawRect(textRect, background);
复制代码

否则就说明这个BackgroundTextSpan有换行。

paint(Canvas canvas, Offset offset, Rect rect, {Offset endOffset})
复制代码

那么就分为三部分: 1.offset 到整个文本的最右边 2.整行 3.整个文本的最左边到endOffset

其实应该很好理解,通过下面的算法,计算出中间是否有整行

      ///endOffset.y has deviation,so we calculate with text height///print(((endOffset.dy - offset.dy) / _painter.height));var fullLinesAndLastLine =((endOffset.dy - offset.dy) / _textPainterHelper.painter.height).round();
复制代码

剩下的就是绘画了,详见

到了这里,我们就已经解决掉了,中文字体和数字在一个TextSpan的时候Background的问题了。

但是这时候产品设计又来了,这是卟呤卟呤闪闪的背景?加个圆角可以不? 加个阴影可以不??

当然可以,什么东西我不能画的,除了钱。。

于是我给BackgroundTextSpan加了clipBorderRadius圆角设置和paintBackground回调

  ///clip BorderRadiusfinal BorderRadius clipBorderRadius;///paint background by yourselffinal PaintBackground paintBackground;
复制代码

圆角设置简单。。之前我们不就做过了,详见

PaintBackground 回调,给大家自己定义背景的机会。

             if (backgroundTextSpan.clipBorderRadius != null) {canvas.save();canvas.clipPath(Path()..addRRect(backgroundTextSpan.clipBorderRadius.resolve(painter.textDirection).toRRect(fullLineRect)));}///draw full line                              canvas.drawRect(fullLineRect, backgroundTextSpan.background);if (backgroundTextSpan.clipBorderRadius != null) {canvas.restore();}
复制代码

至于阴影,官方的BoxDecoration里面写的很详细,其实很多效果我都是看这个类才会的。。大家有空的话多看看源码能得到不少启示。

最后放上 Github Extended_Text,如果你有什么不明白的地方,请告诉我,欢迎加入Flutter Candies,一起生产可爱的Flutter 小糖果(QQ群:181398081)

转载于:https://juejin.im/post/5c8bf9516fb9a049c9669204

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275553.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

细说 Vue.js 3.2 关于响应式部分的优化

大家好,我是若川。上一篇写的是:初学者也能看懂的 Vue3 源码中那些实用的基础工具函数。今天再分享一篇 Vue 3.2 的文章。学习源码整体架构系列、年度总结、JS基础系列背景Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了…

linux 运行apj,pxe+ris-linux实现在DELL R710上网络安装windows2003

一、前言网络远程安装windows2003,目前有两种方法:一就是通过windows自带的远程安装服务(RIS,Remote Installation Service),但这种方法需要用windows做为源服务器,需要安装域控制器,dhcp,tftp等…

Debian Security Advisory(Debian安全报告) DSA-4411-1 firefox-esr security update

Debian Security Advisory(Debian安全报告) DSA-4411-1 firefox-esr security update Package :firefox-esr CVE ID: CVE-2018-18506 CVE-2019-9788 CVE-2019-9790 CVE-2019-9791 CVE-2019-9792 CVE-2019-9793 CVE-2019-9795 CVE-2019-9796 CVE…

Entity framework WhereInExtension

摘自 http://www.cnblogs.com/ejiyuan/archive/2009/07/20/1527224.html publicstaticclassWhereInExtension {privatestaticExpression<Func<TElement, bool>>BuildWhereInExpression<TElement, TValue>(Expression<Func<TElement, TValue>>pro…

写给初中级前端的高级进阶指南

大家好&#xff0c;我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获&#xff0c;感兴趣可以加我微信ruochuan12&#xff0c;拉你进群学习。前言我曾经一度很迷茫&#xff0c;在学了 Vue、React 的实战开发和应用以后&…

Spring Boot Log4j2 日志学习

简介 Java 中比较常用的日志工具类&#xff0c;有&#xff1a; Log4j、SLF4j、Commons-logging&#xff08;简称jcl&#xff09;、Logback、Log4j2&#xff08;Log4j 升级版&#xff09;、Jdk LoggingSpring Boot 默认使用 Logback&#xff0c;但相比较而言&#xff0c;Log4j2 …

学习java过程中

今天看了一个java的代码&#xff0c;结果出现Class bytes found but defineClass()failed for的错误&#xff0c;在网上google了一把&#xff0c;找到原因是&#xff1a;我的编译环境的jdk和代码的jdk不一致&#xff0c;比原来的jdk要高。换一下就解决了。转载于:https://www.c…

linux系统远程教程,Linux下实现远程协助

一、检查系统是否安装有tcl和expect这2个软件包[rootlocalhost:~]$ rpm -qa | grep tcltcl-8.4.7-2tclx-8.3.5-4[rootlocalhost:~]$ rpm -qa | grep expectexpect-5.42.1-1二、检查是否有kibitz命令[rootlocalhost:~]$ whereis kibitzkibitz: /usr/bin/kibitz /usr/share/man/m…

图片相似度对比原理_设计原理:对比和相似性的应用

图片相似度对比原理You know why you are able to read this article right now apart from the availability of your eyes, internet, device, etc.? What is the font color of this text you’re reading? — Black. What is the background color of this page you’re …

学习尤雨溪写的 Vue3 源码中的简单工具函数

大家好&#xff0c;我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获&#xff0c;感兴趣可以加我微信ruochuan12&#xff0c;拉你进群学习。初学者也能看懂的 Vue3 源码中那些实用的基础工具函数本文是纪年小姐姐源码共读第…

APK 本地化

一个APK反编译利器Apktool(android汉化)2010-07-19 18:52转载自&#xff1a;http://blog.sina.com.cn/s/blog_5752764e0100kv34.html APK 本地化 [http://www.andmoto.com/viewthread.php?tid3873]说起APK的汉化&#xff0c;目前大部分教程都是让用Hex Workshop或者Android R…

Linux manjaro系统安装后无法连接wifi,解决方案

2019独角兽企业重金招聘Python工程师标准>>> 笔记本为联想 thinkpad E480 首先通过命令lspci -k看一下原因是否为缺少wifi驱动&#xff0c;如下&#xff0c;如果没有Kernel driver in use&#xff0c;说明缺少驱动。05:00.0 Network controller: Realtek Semiconduc…

检测输入路径是否存在错误_为什么存在用户输入错误

检测输入路径是否存在错误Errors are a fact of life when using almost any type of software. Forms are the worst though. Nothing is more frustrating than filling out a form and getting a robotic message from the computer telling you that you have failed, plea…

若川邀你进 源码共读 群~长期交流学习

大家好&#xff0c;我是若川。这是一个愉快的周六~估计还是有很多读者不知道我。若川名字由来是取自&#xff1a;上善若水&#xff0c;海纳百川。顺便放两篇文章。我读源码的经历&#xff0c;跟各位读者朋友分享下公众号运营策略加我微信进 源码共读 群最近组织了近200人每周源…

2005 打开 2010 项目经验总结

下面是网上的直接复制粘贴&#xff1a;网址为 http://hi.baidu.com/zealot886/blog/item/7364d4266a2a1555ac34dea6.html/cmtid/65ff140a660e02246159f3db 这里是我自己的总结 &#xff08; 1、用vs2010 将该解决方案的所有 项目都改为 net 2.0&#xff08;方法&#xff0c;右击…

读取linux的运行状态,Linux下安装使用sar工具来获取系统运行状态

sar 找出系统瓶颈的利器sar是System Activity Reporter(系统活动情况报告)的缩写。sar工具将对系统当前的状态进行取样&#xff0c;然后通过计算数据和比例来表达系统的当前运行状态。它的 特点是可以连续对系统取样&#xff0c;获得大量的取样数据&#xff1b;取样数据和分析的…

说说 Spring 的事务同步管理器

Spring 将 JDBC 的 Connection、Hibernate 的 Session 等访问数据库的连接或者会话对象统称为资源&#xff0c;这些资源在同一时刻是不能多线程共享的 。 为了让 DAO 或 Service 类可以实现单例模式&#xff0c; Spring 的事务同步管理类 org.springframework.transaction.supp…

错过校招_我们在用户测试中容易错过的事情

错过校招What makes a tool well designed? As a designer, I’ve thought about this question for a long time, and over the past few years I’ve developed a system that I now use with every new project I approach, from small startups to large companies like L…

这些 JS 中强大的操作符,总有几个你没听说过

大家好&#xff0c;我是若川。今天推荐一篇相对简单些的文章。大家应该都知道了我最近组织了源码共读活动&#xff0c; 有小伙伴表示读源码上瘾&#xff0c;也很有收获。工作0-5年都可以参与。感兴趣可以加我微信 ruochuan12 私信 源码 进群。1. 数值分割符 _2. 逗号运算符 ,3.…

Class 创建性能大比拼(反射,泛型反射,泛型创建,缓存Emit,非缓存Emit)

一说到反射&#xff0c;很多人都想到了性能&#xff0c;更有甚者直接说“慎用反射&#xff0c;遗患无穷”&#xff0c;“用反射&#xff0c;感觉怎么像是退步啊&#xff5e;”&#xff0c;看到这种言论&#xff0c;直接把反射妖魔化了&#xff0c;如果这种言论长此以往&#xf…