Flutter实现渐变色加描边字体效果
16lz
2022-01-24
目录
写在前面
内容
实现描边
实现渐变
一些调整
参考
写在前面
实现如下图的效果,这个数字的内部和外部都有渐变色。
内容
实现描边
在网上搜索一轮,可以看到通过用 Stack,来让两个 Text叠加,并对上一个 Text设置外部描边,就可以得到如下的效果。
实现渐变
颜色的渐变使用 ShaderMask来进行处理,它可以帮我们计算出文字的矩形,然后我们直接设置给 LinearGradient即可。
在使用 ShaderMask的时候,字体的颜色需要是白色。由于描边的 Text 我们使用 foreground来添加描边,故颜色的设置也应该在这里处理,不能像另一个 Text 一样,在 TextStyle 里的 color属性设置,否则会报错。
一些调整
上面已经基本实现了我们最初的效果,但仍存在一点问题,就是文字描边的边缘部分有一些露白的情况,这是因为描边的 strokeWidth有些大,超过了文字的矩形范围,而我们的渐变渲染范围只在矩形内。
在这里可以看到是有部分越过了左右边界:
如果用英文字符来看的话,会更明显:
针对这些情况,我目前是两种处理:
对于左右边界的情况,给文字前后添加空白字符:
对于上下边界的情况,调整 TextStyle里 height属性:
更多相关文章
- android:listview实现qq,微信好友列表(头像,昵称,个性签名)
- Android中程序与Service交互的方式
- Android(安卓)HAL 介绍
- Android序列化Serializable和Parcelable的理解和区别
- Android(安卓)学习笔记之如何实现简单相机功能
- Android(安卓)Debug Bridge 技术实现原理
- Android泡泡聊天界面的实现
- 配置Mysql主从服务实现实例
- mysql 从一个表中查数据并插入另一个表实现方法