Flutter实现简单的内容高亮效果

更新时间：2023年08月15日 08:38:11 作者：程序员一鸣

内容高亮并不陌生，特别是在搜索内容页面，可以说四处可见，这篇文章主要为大家介绍了如何使用Flutter实现简单的内容高亮效果，需要的可以参考下

一、案例简单效果

1、简单的内容高亮展示

2、列表形式内容展示

二、认识RichText

要实现高亮效果，那么我们必须了解富文本组件RichText，话又说回来，什么是富文本呢？简单来说，它是一种特殊的文本格式，比普通文本更加丰富多彩，可以包含各种字体、颜色、大小等元素，使文本更加生动、有趣，比如我们常见的阅读协议等场景，均可采用富文本形式，这是原生的文本无法实现的效果。

初识构造

构造属性需要注意的是，这里的text，和文本Text中的text是不一样的，文本Text指的是字符串，这里的text指的是InlineSpan，当然了InlineSpan是抽象基类，一般我们使用TextSpan。

RichText({
    super.key,
    required this.text,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.softWrap = true,
    this.overflow = TextOverflow.clip,
    this.textScaleFactor = 1.0,
    this.maxLines,
    this.locale,
    this.strutStyle,
    this.textWidthBasis = TextWidthBasis.parent,
    this.textHeightBehavior,
    this.selectionRegistrar,
    this.selectionColor,
  }) : assert(text != null),
       assert(textAlign != null),
       assert(softWrap != null),
       assert(overflow != null),
       assert(textScaleFactor != null),
       assert(maxLines == null || maxLines > 0),
       assert(textWidthBasis != null),
       assert(selectionRegistrar == null || selectionColor != null),
       super(children: _extractChildren(text));

常见构造属性概述

const TextSpan({
    this.text,
    this.children,
    super.style,
    this.recognizer,
    MouseCursor? mouseCursor,
    this.onEnter,
    this.onExit,
    this.semanticsLabel,
    this.locale,
    this.spellOut,
  }) : mouseCursor = mouseCursor ??
         (recognizer == null ? MouseCursor.defer : SystemMouseCursors.click),
       assert(!(text == null && semanticsLabel != null));

属性	类型	概述
textAlign	TextAlign	文本对齐方式TextAlign.left TextAlign.right TextAlign.cente TextAlign.justify TextAlign.start TextAlign.end
textDirection	TextDirection	文本的方向TextDirection.ltr TextDirection.rtl
overflow	TextOverflow	文字溢出的处理方式 TextOverflow.clip：剪切溢出的文本填满容器。 TextOverflow.fade：将溢出的文本淡化为透明。 TextOverflow.ellipsis：使用省略号表示文本已溢出。 TextOverflow.visible：呈现容器外溢出的文本
maxLines	int	最大行数
textWidthBasis	TextWidthBasis	文本的宽度TextWidthBasis.parentTextWidthBasis.longestLine

TextSpan常见属性

属性	说明
text	String类型的文本
children	子组件
style	TextStyle类型的文本样式可以设置文字的大小、颜色、样式等
recognizer	指定手势交互 recognizer: TapGestureRecognizer()..onTap = () {},可以监听点击事件

简单案例

RichText(
            text: const TextSpan(children: [
              TextSpan(text: "床前明月光，", style: TextStyle(color: Colors.black)),
              TextSpan(text: "疑是地上霜。", style: TextStyle(color: Colors.red)),
              TextSpan(text: "举头望明月，", style: TextStyle(color: Colors.blueAccent)),
              TextSpan(text: "低头思故乡。", style: TextStyle(color: Colors.tealAccent))
            ])

效果

当然了，除了上述写法之外，也可以使用Text.rich来实现，代码如下：

 const Text.rich(TextSpan(children: [
            TextSpan(text: "床前明月光，", style: TextStyle(color: Colors.black)),
            TextSpan(text: "疑是地上霜。", style: TextStyle(color: Colors.red)),
            TextSpan(text: "举头望明月，", style: TextStyle(color: Colors.blueAccent)),
            TextSpan(text: "低头思故乡。", style: TextStyle(color: Colors.tealAccent))
          ]))

三、文本的高亮实现逻辑

RichText可以实现一个富文本展示，那么如何利用这个组件实现某个内容高亮展示呢？首先，我们要明白，高亮的内容是不固定的，一段内容的每个字符都有可能会高亮，所以针对TextSpan，我们就需要动态的创建，然后动态的改变其样式。

这里的动态也是十分的简单，无非就是字符串的截取，分别是开头、结尾、和中间三种情况进行截取，如下图所示。

当然了，需要注意，有可能要搜索的这个内容，在整个内容中是多处存在的，这个时候，针对以上的逻辑，就需要遍历循环了，直至找到最后一个搜索的内容。

主要的逻辑如下

 //搜索内容为空
    if (_searchContent == "") {
      return Text(
        _content,
        style: _ordinaryStyle,
      );
    }
    List<TextSpan> richList = [];
    int start = 0;
    int end;
    //遍历，进行多处高亮
    while ((end = _content.indexOf(_searchContent, start)) != -1) {
      //如果搜索内容在开头位置，直接高亮，此处不执行
      if (end != 0) {
        richList.add(TextSpan(
            text: _content.substring(start, end), style: _ordinaryStyle));
      }
      //高亮内容
      richList.add(TextSpan(text: _searchContent, style: _highlightStyle));
      //赋值索引
      start = end + _searchContent.length;
    }
    //搜索内容只有在开头或者中间位置，才执行
    if (start != _content.length) {
      richList.add(TextSpan(
          text: _content.substring(start, _content.length),
          style: _ordinaryStyle));
    }
    return RichText(
      text: TextSpan(children: richList),
    );

四、高亮组件源码

源码很简单，可以结合列表组件或者单独使用，当然了，有一些特殊需求，文字加大或者改变背景等需求，都可以进行扩展。

class TextHighlight extends StatelessWidget {
  final TextStyle _ordinaryStyle; //普通的样式
  final TextStyle _highlightStyle; //高亮的样式
  final String _content; //文本内容
  final String _searchContent; //搜索的内容
  const TextHighlight(this._content, this._searchContent, this._ordinaryStyle,
      this._highlightStyle,
      {super.key});
  @override
  Widget build(BuildContext context) {
    //搜索内容为空
    if (_searchContent == "") {
      return Text(
        _content,
        style: _ordinaryStyle,
      );
    }
    List<TextSpan> richList = [];
    int start = 0;
    int end;
    //遍历，进行多处高亮
    while ((end = _content.indexOf(_searchContent, start)) != -1) {
      //如果搜索内容在开头位置，直接高亮，此处不执行
      if (end != 0) {
        richList.add(TextSpan(
            text: _content.substring(start, end), style: _ordinaryStyle));
      }
      //高亮内容
      richList.add(TextSpan(text: _searchContent, style: _highlightStyle));
      //赋值索引
      start = end + _searchContent.length;
    }
    //搜索内容只有在开头或者中间位置，才执行
    if (start != _content.length) {
      richList.add(TextSpan(
          text: _content.substring(start, _content.length),
          style: _ordinaryStyle));
    }
    return RichText(
      text: TextSpan(children: richList),
    );
  }
}

案例Demo很是简单，上边是搜索框，下面是展示的内容，这里就不贴了，高亮组件已经给大家提供了，大家可以直接复制使用。

以上就是Flutter实现简单的内容高亮效果的详细内容，更多关于Flutter内容高亮的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android属性动画实现图片从左到右逐渐消失
这篇文章主要介绍了Android属性动画实现图片从左到右逐渐消失，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
Android下hook点击事件的示例
这篇文章主要介绍了Android下hook点击事件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Android开发实现的ViewPager引导页功能(动态加载指示器)详解
这篇文章主要介绍了Android开发实现的ViewPager引导页功能(动态加载指示器),结合实例形式详细分析了Android使用ViewPager引导页的具体步骤,相关布局、功能使用技巧,需要的朋友可以参考下
2017-11-11
Android实现图片文字轮播特效
这篇文章主要介绍了Android图片文字轮播效果，分别实现图片和文字自动滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-01-01
Android 动画之TranslateAnimation应用详解
本节讲解TranslateAnimation动画，TranslateAnimation比较常用，比如QQ，网易新闻菜单条的动画，就可以用TranslateAnimation实现，本文将详细介绍通过TranslateAnimation 来定义动画,需要的朋友可以参考下
2012-12-12
Android SQLite3多线程操作问题研究总结
这篇文章主要介绍了Android SQLite3多线程操作问题研究总结,本文总结了SQLite3是否支持多线程、SQLiteDatabase的同步锁、多线程读数据库等问题,需要的朋友可以参考下
2015-03-03
Android Spinner和GridView组件的使用示例
Spinner其实是一个列表选择框，不过Android的列表选择框并不需要显示下拉列表，而是相当于弹出一个菜单供用户选择，GridView是一个在二维可滚动的网格中展示内容的控件。网格中的内容通过使用adapter自动插入到布局中
2022-03-03
Android 中TextView中跑马灯效果的实现方法
这篇文章主要介绍了Android 中TextView中跑马灯效果的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
Flutter使用Android原生播放器详解
这篇文章主要介绍了Flutter使用Android原生播放器，自己写Flutter也有一段时间了，刚好最近公司的项目想在PC端重写一个，就想着用Flutter实现试一试
2023-02-02
详解Android自定义控件属性TypedArray以及attrs
这篇文章主要为大家介绍了android自定义控件属性TypedArray以及attrs，感兴趣的小伙伴们可以参考一下
2016-01-01