【Flutter 问题系列第 50 篇】Flutter 实现高亮显示搜索结果的文字

这是【Flutter 问题系列第 50 篇】，如果觉得有用的话，欢迎关注专栏。

老规矩，先上效果图，没有图会浪费各位的时间，小弟懂

一：设计思路

• 因为要在一行内容中显示不同颜色的文本，所以要用到 RichText 组件；
• 如果没有找到要高亮显示的文本则返回原字符串；
• 如果找到了要高亮显示的文本，则从字符串左边开始截取，当出现第一个要高亮显示的文本时，把此时已经出现的普通文本和高亮显示的文本都加入到一个 List 的数组中，如果字符串中有多个符合条件的文本，重复前面出现第一个要高亮显示的文本时的步骤即可。

二：功能实现

这里我模拟搜索时，后台返回的数据，如下代码所示

 List _resList = [
    "数据结构与算法",
    "数据线",
    "大数据",
    "AllenSu的数据",
    "数据线三合一",
    "CSDN博客",
    "CSDN数据显示，今天的访问量不错",
    "让我们学习数据，了解数据",
    "数据可视化",
    "每天进步一点点",
  ];

后面的我已经把要高亮显示的文本功能封装成了一个组件，注释也比较详细，比较简单，直接上代码了

// ------------------------------------------------------
// author：AllenSu
// date  ：2021/12/12 4:52 下午
// usage ：搜索结果高亮显示组件
// ------------------------------------------------------

class LightText extends StatelessWidget {
  final String text; // 要显示的内容
  final String lightText; // 要显示的内容中，需要高亮显示的文字(默认为空字符串，即不高亮显示文本)
  final TextStyle? textStyle; // 要显示的内容的文本风格
  final TextStyle? lightStyle; // 要显示的内容中，需要高亮显示的文字的文本风格

  // 默认普通文本的样式
  TextStyle _defTextStyle = TextStyle(fontSize: 16, color: Colors.black);
  // 默认高亮文本的样式
  TextStyle _defLightStyle = TextStyle(fontSize: 16, color: Colors.blue);

  LightText({
    required this.text,
    this.lightText = "",
    this.textStyle,
    this.lightStyle,
  });

  @override
  Widget build(BuildContext context) {
    // 如果没有需要高亮显示的内容
    if (lightText.isEmpty) {
      return Text(text, style: textStyle ?? _defTextStyle);
    }
    // 如果有需要高亮显示的内容
    return _lightView();
  }

  /// 需要高亮显示的内容
  Widget _lightView() {
    List spans = [];
    int start = 0; // 当前要截取字符串的起始位置
    int end; // end 表示要高亮显示的文本出现在当前字符串中的索引

    // 如果有符合的高亮文字
    while ((end = text.indexOf(lightText, start)) != -1) {
      // 第一步：添加正常显示的文本
      spans.add(TextSpan(text: text.substring(start, end), style: textStyle ?? _defTextStyle));
      // 第二步：添加高亮显示的文本
      spans.add(TextSpan(text: lightText, style: lightStyle ?? _defLightStyle));
      // 设置下一段要截取的开始位置
      start = end + lightText.length;
    }
    // 下面这行代码的意思是
    // 如果没有要高亮显示的，则start=0，也就是返回了传进来的text
    // 如果有要高亮显示的，则start=最后一个高亮显示文本的索引，然后截取到text的末尾
    spans.add(
      TextSpan(text: text.substring(start, text.length), style: textStyle ?? _defTextStyle),
    );
    
    return RichText(
      text: TextSpan(children: spans),
    );
  }
}

三：如何使用

• 把后台返回的搜索结果中的字符串，作为封装的 LightText 组件的 text 属性；
• 把你输入的内容，作为封装的 LightText 组件的 lightText 属性；

是不是很简单呢，ok，关于在 Flutter 如何高亮显示搜索结果的文字便说到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年12月17日 GitHub 标星已达 133K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。