Flutter：简单搞一个内容高亮-阿里云开发者社区

Flutter：简单搞一个内容高亮

2023-08-15 120

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如上的效果，在Flutter当中，实现起来可以说是无比的简单，毕竟原生的组件都给我们提供了，那就是富文本组件RichText。

内容高亮并不陌生，特别是在搜索内容页面，可以说四处可见，就拿掘金这个应用而言，针对某一个关键字，我们搜索之后，与关键字相同的内容，则会高亮展示，如下图所示：

如上的效果，在Flutter当中，实现起来可以说是无比的简单，毕竟原生的组件都给我们提供了，那就是富文本组件RichText。

针对今天的内容，简单的列一个大纲，主要内容如下：

1、案例简单效果

2、认识RichText

3、文本的高亮实现逻辑

4、高亮组件源码

一、案例简单效果

1、简单的内容高亮展示

2、列表形式内容展示

二、认识RichText

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

初识构造

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

RichText({
super.key,
requiredthis.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));

常见构造属性概述：

constTextSpan({
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.parent TextWidthBasis.longestLine

TextSpan常见属性

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

简单案例：

RichText(
text: constTextSpan(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来实现，代码如下：

constText.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=="") {
returnText(
_content,
style: _ordinaryStyle,
      );
    }
List<TextSpan>richList= [];
intstart=0;
intend;
//遍历，进行多处高亮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));
    }
returnRichText(
text: TextSpan(children: richList),
    );

四、高亮组件源码

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

classTextHighlightextendsStatelessWidget {
finalTextStyle_ordinaryStyle; //普通的样式finalTextStyle_highlightStyle; //高亮的样式finalString_content; //文本内容finalString_searchContent; //搜索的内容constTextHighlight(this._content, this._searchContent, this._ordinaryStyle,
this._highlightStyle,
      {super.key});
@overrideWidgetbuild(BuildContextcontext) {
//搜索内容为空if (_searchContent=="") {
returnText(
_content,
style: _ordinaryStyle,
      );
    }
List<TextSpan>richList= [];
intstart=0;
intend;
//遍历，进行多处高亮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));
    }
returnRichText(
text: TextSpan(children: richList),
    );
  }
}

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

文章标签：

容器