--- theme: channing-cyan --- ## 相关阅读 * [Flutter RichText支持图片显示和自定义图片效果](https://juejin.cn/post/6844903797911732238) * [Flutter RichText支持自定义文本溢出效果](https://juejin.cn/post/6844903800302485511) * [Flutter RichText支持自定义文字背景)](https://juejin.cn/post/6844903801808224263) * [Flutter RichText支持特殊文字效果](https://juejin.cn/post/6844903806098997262) * [Flutter Text: 扶我起来](https://juejin.cn/post/6955095562215489573) * [Flutter 糖果群主跑了！](https://juejin.cn/post/7238604706459697189) ## 前言 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/16/1698268a3192499b~tplv-t2oaga2asx-image.image#?w=1085\&h=704\&s=166284\&e=jpg\&b=85583f) 有一天，产品跟我说，我们的产品的文字太普通了，我想要那种五彩斑斓渐进的效果，随即丢给我一张图。 ![截屏2024-09-06 15.20.14.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f2f163b492074b618075269a7ad239bc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=%2F7%2FJ6XayS%2BJM3%2BjQbQt0E0rn68I%3D) 我说这不是轻松拿捏的事情吗？ ## 古狗一下打开古狗搜索一番，渐进色文本主要的实现方式有 `2` 种。 ### ShaderMask ```dart ShaderMask( shaderCallback: (Rect bounds) { return const LinearGradient( colors: [Colors.blue, Colors.red], ).createShader(bounds); }, child: const Text( '我会被作用于渐变效果', style: TextStyle(color: Colors.white), ), ), ``` ![截屏2024-09-06 14.54.42.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/410d17de64cf4b53af3ae2e3d235b103~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=A%2BAe5M%2BoZ%2FL5iUMkJ4XvGhnsof4%3D) 接下来我们加上 `WidgeSpan` 以及一些 `emoji` 表情看看。 ```dart ShaderMask( shaderCallback: (Rect bounds) { return const LinearGradient( colors: [Colors.blue, Colors.red], ).createShader(bounds); }, child: Text.rich( TextSpan( children: [ WidgetSpan( child: Container( width: 20, height: 20, color: Colors.red, ), ), const TextSpan( text: '🤭我会被作用于渐变效果🤭', style: TextStyle(color: Colors.green), ), WidgetSpan( child: Container( width: 20, height: 20, color: Colors.blue, ), ), ], ), style: const TextStyle(color: Colors.white), ), ), ``` ![截屏2024-09-06 15.09.05.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/faa312569b8c4bf1921b2cf062a685fe~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=NCri%2FR%2BzKTkTgkuby5Bs479T7po%3D) > `ShaderMask` 由于是对整体生效，很难满足我们的需求, 比如无法特殊处理 `WidgeSpan` 以及一些 `emoji`，比如多行的时候，也只能对整体，不能对每一行单独生效。 ### TextStyle.foreground ```dart Text( '我会被作用于渐变效果', style: TextStyle( foreground: Paint() ..shader = const LinearGradient( colors: [Colors.blue, Colors.red], ).createShader( // 文本的相对位置区域 const Rect.fromLTWH(0, 0, 100, 50), ), ), ), ``` 由于不容易知道文本实际的渲染位置和大小，可以看到无法做到跟 `ShaderMask` 一样的效果。 ![截屏2024-09-06 15.03.58.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b64e6d57187b44aaa71260de37f5654c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=3Z7ubxemZnIAugH6qqyGbe0rVm0%3D) 接下来我们加上 `WidgeSpan` 以及一些 `emoji` 表情看看。 ```dart Text.rich( TextSpan( children: [ WidgetSpan( child: Container( width: 20, height: 20, color: Colors.red, ), ), const TextSpan( text: '🤭我会被作用于渐变效果🤭', style: TextStyle(color: Colors.green), ), WidgetSpan( child: Container( width: 20, height: 20, color: Colors.blue, ), ), ], ), style: TextStyle( foreground: Paint() ..shader = const LinearGradient( colors: [Colors.blue, Colors.red], ).createShader( // 文本的相对位置区域 const Rect.fromLTWH(0, 0, 200, 50), ), ), ), ``` ![截屏2024-09-06 15.11.25.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fcae8c28b41545f5bc6f22099788abc0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=tm3PQ1i7TaIkZR1ABARW5r4EhTw%3D) > 效果尚可，但是 `createShader` 传入的 `Rect` 需要动态根据情况去设置，这对于用户来说是极其不方便和通用的。 ## 自己写试试总结下来，直接利用官方的 `api` ，并不能优雅地处理文本渐进色的场景。 * 通用简单的 `api` * 可以处理 `WidgeSpan` 以及一些 `emoji`。 * 可以自定义渐进效果的作用区域其实，不管哪种方式实现，最终还是归于 `Canvas`。于是我用 `CustomPainter` 做了个小实验。 ```dart class _GradientTextPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { // 创建 TextPainter 来绘制文本 final TextPainter textPainter = TextPainter( text: const TextSpan(text: '渐进色文本'), textDirection: TextDirection.ltr, ); // 设置文本的最大宽度 textPainter.layout(maxWidth: size.width); // 定义渐变的矩形区域 final Size textSize = textPainter.size; final Rect shaderRect = Rect.fromLTWH(0, 0, textSize.width, textSize.height); // 创建渐变的着色器 final Shader shader = const LinearGradient( colors: [Colors.blue, Colors.red], ).createShader(shaderRect); // 绘制渐变色文本 final Paint paint = Paint() ..shader = shader ..blendMode = BlendMode.srcIn; canvas.saveLayer(const Offset(0, 0) & size, Paint()); textPainter.paint(canvas, const Offset(0, 0)); canvas.drawRect(shaderRect, paint); canvas.restore(); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } } ``` ![截屏2024-09-06 16.58.40.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/22a08e52e6744a9db38b71fd63856874~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=uVFjB3duEdztRf00PtJLWwzBxA0%3D) 利用 `shader` 以及 `BlendMode.srcIn` 我们很轻松的做出来渐进文字的效果，基于这个原理，我们可以做出来更多的效果来。 ## ExtendedText 基于上面的探索，[ExtendedText](https://pub-web.flutter-io.cn/packages/extended_text) 新增了 `GradientConfig` 参数。 ```dart GradientConfig _config = GradientConfig( gradient: const LinearGradient( colors: [Colors.blue, Colors.red], ), ignoreRegex: GradientConfig.ignoreEmojiRegex, ignoreWidgetSpan: true, renderMode: GradientRenderMode.fullText, blendMode: BlendMode.srcIn, beforeDrawGradient: (PaintingContext context, TextPainter textPainter, Offset offset) { }, ); ``` ### 渐进配置渐进配置，为 `Flutter sdk` 中的 `Gradient`. ```dart gradient: const LinearGradient( colors: [Colors.blue, Colors.red], ), ``` ### 渐进模式渐进效果的作用方式 ```dart enum GradientRenderMode { fullText, // 作用在整个文本 line, // 作用区域分为一行一行 selection, // 根据 `TextPainter.getBoxesForSelection` 提供的区域 word, // 根据 `TextPainter.getWordBoundary` 提供的区域 character, // 根据 `CharacterRange` 分割的每一个字符所占用的区域 } ``` #### 渐进效果从左到右 | fulltext | selection | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![截屏2024-09-06 14.04.10.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ec5b5c8ba6634f7baa43e9cfa5472cf4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=v%2BlshC6o8%2F3QfntgPN3F8atDlQM%3D) | ![截屏2024-09-06 14.04.43.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3bfa3cd7a2ac410da9e0b914a487d448~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=pty6g3jyUtvCxj05qpp5Jf77Xig%3D) | | word | character | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![截屏2024-09-06 14.05.55.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bebccc1f08334ab0a9ce58ffd50c548e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=ggvRNKQEQdD7pnh%2F75i%2B5icUHnw%3D) | ![截屏2024-09-06 14.05.15.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bb9b7b0dcfde48c6ac46a2eba65ad677~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=KOSviZD%2BX88e40XsQBFZ5lj1gFQ%3D) | #### 渐进效果从上到下 | fulltext | line | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![截屏2024-09-06 14.06.43.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/45b2af21d2974a1d80447885452144b7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=PRAtMLRdxh%2BGVF42Z5F48iwZTiA%3D) | ![截屏2024-09-06 14.07.21.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e3e15993b5c243168c3a0721e5e23be9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=AN12Km8x5J4HYmTIm2kXH%2B0ke7w%3D) | ### BlendMode 我们是利用 `Paint().blendMode` 来绘制渐进效果的。默认是 \[BlendMode.srcIn] ，提供这个属性是为了以防万一，用户可以自己设置。 ### 不受渐进效果影响的区域我们想要消去渐进效果的影响，其实之前的文章里面也有讲到过。可以利用 [BlendMode.clear 或者 canvas.clipPath / canvas.clipRect](https://juejin.cn/post/6955095562215489573#heading-8) 来处理，大概的代码如下: ```dart if (ignoreRect != null) { context.canvas.save(); context.canvas.clipRect( ignoreRect.shift(offset), clipOp: ui.ClipOp.difference, ); } final ui.Shader shader = _gradientConfig!.gradient.createShader(rect); final ui.Paint paint = Paint() ..shader = shader ..blendMode = BlendMode.srcIn; // Draw the gradient within the rectangle. context.canvas.drawRect(rect, paint); if (ignoreRect != null) { context.canvas.restore(); } ``` #### ignoreWidgetSpan 对于 `WidgetSpan`，我们可以通过控制绘制先后，来避免 `WidgetSpan` 的绘制受到渐进效果的影响。即想要避免，就渐进效果的绘制就应该在 `WidgetSpan` 绘制之前。 ```dart // zmtzawqlp if (_gradientConfig != null && _gradientConfig!.ignoreWidgetSpan) { drawGradient(context, offset); } paintInlineChildren(context, offset); // zmtzawqlp if (_gradientConfig != null && !_gradientConfig!.ignoreWidgetSpan) { drawGradient(context, offset); } ``` #### ignoreRegex 我们需要避免一些特殊字符受到渐进效果的影响，比如 `emoji` ，那我们只需要把它们找出来，然后利用 `clipRect` 避免。 ```dart final List boxes = []; if (_gradientConfig != null && _gradientConfig!.ignoreRegex != null) { _gradientConfig!.ignoreRegex!.allMatches(_textPainter.plainText).forEach( (RegExpMatch match) { final int start = match.start; final int end = match.end; final TextSelection textSelection = TextSelection(baseOffset: start, extentOffset: end); boxes.addAll(_textPainter.getBoxesForSelection(textSelection)); }, ); } ``` 最后将 `boxes` 一一进行处理即可。 #### IgnoreGradientSpan 如果有一些特定的内容，不想受到渐进效果的影响，那么我们也只需要把它们找出来， ```dart if (_textPainter.text != null) { void _findIgnoreGradientSpan(InlineSpan span, int startIndex) { if (span is IgnoreGradientSpan) { final int length = span.toPlainText().length; final TextSelection textSelection = TextSelection( baseOffset: startIndex, extentOffset: startIndex + length); boxes.addAll(_textPainter.getBoxesForSelection(textSelection)); // IgnoreGradientSpan and it's children should not be applied to the gradient. return; } if (span is TextSpan && span.children != null) { int childStartIndex = startIndex; for (final InlineSpan child in span.children!) { _findIgnoreGradientSpan(child, childStartIndex); childStartIndex += child.toPlainText().length; } } } _findIgnoreGradientSpan(_textPainter.text!, 0); } ``` 你这样使用它即可 ```dart class IgnoreGradientTextSpan extends TextSpan with IgnoreGradientSpan { IgnoreGradientTextSpan({String? text, List? children}) : super( text: text, children: children, ); } ``` #### beforeDrawGradient 除了上面特定的处理，也提供了回调给用户，用户可以根据自己的需求，对渐进效果进行处理，比如下面演示的就是只对心型和星星内部的文字进行渐变。 ```dart void _beforeDrawGradient( PaintingContext context, TextPainter textPainter, Offset offset, ) { final Rect rect = offset & textPainter.size; Path? path; switch (_drawGradientShape) { case DrawGradientShape.heart: path = clipheart(rect); break; case DrawGradientShape.star: path = clipStar(rect); break; case DrawGradientShape.none: } if (path != null) { context.canvas.drawPath( path, Paint() ..color = Colors.red ..style = PaintingStyle.stroke ..strokeWidth = 1, ); context.canvas.clipPath(path); } } ``` ![截屏2024-09-06 17.42.04.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/14e28aa98f2a47d6bc9579362520a239~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rOV55qE56m66Ze0:q75.awebp?rk3s=f64ab15b&x-expires=1758440721&x-signature=fi10xVqX7VVT9CbSHv%2FhzZV%2BkxE%3D) ## 结语 [extended\_text | Flutter package (flutter-io.cn)](https://pub-web.flutter-io.cn/packages/extended_text) 该功能在 `Flutter 3.10.0` 及其以上版本增加支持，即组件版本大于等于 `11.0.9`。通过对文本绘制流程的定制，我们轻松地支持了更加强大的文字渐进效果。 `Flutter` 较为优秀的结构设计让用户能够很方便地进行各种布局以及绘制的定制，这也是 `Flutter` 社区能不断壮大发展的一个原因。爱 `Flutter`，爱`糖果`，欢迎加入[Flutter Candies](https://github.com/fluttercandies)，一起生产可爱的Flutter小糖果[![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8afe301bcc2a4fccbdbcee6d05927a8c~tplv-k3u1fbpfcp-zoom-1.image#?w=90\&h=22\&s=1827\&e=png\&b=1fa4e6)](https://img.shields.io/badge/dynamic/yaml?url=https%3A%2F%2Fgitee.com%2Fzmtzawqlp%2F.flutter_github%2Fraw%2Fmain%2Fdata.yml\&query=%24.qq_group_number\&style=for-the-badge\&label=QQ%E7%BE%A4\&logo=qq\&color=1DACE8) 最最后放上 [Flutter Candies](https://github.com/fluttercandies) 全家桶，真香。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/192cbc5338cc4848af54c629d6865050~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=1920\&s=131155\&e=png\&a=1\&b=5abffa)