Flutter:简单搞一个内容高亮

这篇具有很好参考价值的文章主要介绍了Flutter:简单搞一个内容高亮。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

1、案例简单效果

2、认识RichText

3、文本的高亮实现逻辑

4、高亮组件源码

一、案例简单效果

1、简单的内容高亮展示

Flutter:简单搞一个内容高亮,Flutter点石成金,Flutter内容高亮,RichText,Flutter搜索高亮,Flutter富文本

2、列表形式内容展示

Flutter:简单搞一个内容高亮,Flutter点石成金,Flutter内容高亮,RichText,Flutter搜索高亮,Flutter富文本

二、认识RichText

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

Flutter:简单搞一个内容高亮,Flutter点石成金,Flutter内容高亮,RichText,Flutter搜索高亮,Flutter富文本

初识构造

构造属性需要注意的是,这里的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.parent

TextWidthBasis.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))
            ])

效果:

Flutter:简单搞一个内容高亮,Flutter点石成金,Flutter内容高亮,RichText,Flutter搜索高亮,Flutter富文本

当然了,除了上述写法之外,也可以使用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,我们就需要动态的创建,然后动态的改变其样式。

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

Flutter:简单搞一个内容高亮,Flutter点石成金,Flutter内容高亮,RichText,Flutter搜索高亮,Flutter富文本

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

Flutter:简单搞一个内容高亮,Flutter点石成金,Flutter内容高亮,RichText,Flutter搜索高亮,Flutter富文本

主要的逻辑如下:

 //搜索内容为空
    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很是简单,上边是搜索框,下面是展示的内容,这里就不贴了,高亮组件已经给大家提供了,大家可以直接复制使用。文章来源地址https://www.toymoban.com/news/detail-648242.html

到了这里,关于Flutter:简单搞一个内容高亮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • pandas 笔记:高亮内容

     1.1.1 默认情况 1.1.2  color 调整高亮的颜色(后同)  1.1.3 subset 指定操作的列(后同) 1.1.4 props  突出显示的CSS属性(后同)   subset color props 同1.1 2.1.1 axis 默认为0,表示列 axis=1,表示行  axis=None, dataFrame中最大的那个 参数和使用方法和max一样 2.2.1 链式调用min和max 还是使用

    2024年02月15日
    浏览(34)
  • flutter使用shared_preferences依赖库实现简单的本地数据存储,封装成一个简单的单例类,方便前端同学使用

    shared_preferences 仓库地址:shared_preferences | Flutter Package shared_preferences这个依赖库还是非常好用的,全平台支持,就像前端经常使用的localstorage一样方便,所以就想着封装成一个简单的类,方便前端同学使用。封装好的代码支持json或者数组等这种类型的存储和获取。 在utils里面

    2024年01月20日
    浏览(40)
  • kotlin 编写一个简单的天气预报app(六)使用recyclerView显示forecast内容

    要使用RecyclerView显示天气预报的内容 先在grandle里添加recyclerView的引用 创建一个RecyclerView控件:在布局文件中,添加一个RecyclerView控件,用于显示天气预报的列表。 这是一个包含三个TextView的LinearLayout布局,用于显示天气相关的数据。每个TextView都有一个唯一的id,可用于在代

    2024年02月13日
    浏览(76)
  • flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能

    flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能 最近有位朋友讨论的时候,提到了输入框的高亮展示。在flutter TextField中需要插入特殊样式的标签,比如:“请 @张三 回答一下”,这一串字符在TextField中输入,当输入@时 弹出好友列表选择,然后将 “@张三”高

    2024年02月07日
    浏览(47)
  • 用Python手动实现一个简单的服务器,不借助任何框架在浏览器中输出任意内容

    前言 嗨喽~大家好呀,这里是魔王呐 ❤ ~! 在公司网站开发中,我们往往借助于Flask、Django等网站开发框架去提高网站开发效率。 那么在面试后端开发工程师的时候,面试官可能就会问到网站开发的底层原理是什么? 我们不止仅仅会使用框架开发,还需要知其所以然 今天领大

    2024年02月15日
    浏览(41)
  • vue中实现markdown+代码高亮格式渲染,及内容一键复制功能

    涉及组件:vue-markdown、highlight.js、clipboard 完成功能:将数据以markdown格式渲染,代码部分高亮,内容可一键复制 ①main.js ②CodeCopy.vue vue-markdown可能存在某些问题,比如数据中的1. 2. 3. 等标号会被莫名吞掉隐藏。 经观察发现 : 这样格式的数据,标号会被隐藏:nn1. 空格 ;如

    2024年02月10日
    浏览(31)
  • Vue中实现自动匹配搜索框内容 关键字高亮文字显示

    实现效果如下:  1.首先需要给输入框进行双向绑定  2.拿到搜索的结果去渲染页面  将返回的结果和搜索的进行比对 如果相同的 就变红 上代码 html部分 js部分

    2024年02月12日
    浏览(42)
  • Es elasticsearch 二十 站内搜索示例 高亮内容 java springboot 实现

    目录 实现思路 代码 全依赖 参数对象 搜索实现代码全代码 日志 重点 权重 分页 入参高亮数据处理 返回出参数据处理 构建请求 请求体设置搜索字段 返回数据解析获取高亮 高亮通过设置标签和class  前端设置class字体颜色 也可直接写在后端   全依赖 参数对象 搜索实现代码

    2024年02月02日
    浏览(41)
  • 通过ChatGPT实现的ChatPDF,简单的应用落地,让你的文档变成一个智能助手,通过对话的方式快速学习文档内容

    目录 先看效果 实现原理 环境安装 应用场景 首先,找到一篇论文先,我这里随便找了一篇pdf格式的论文 那么,我现在让他担任一个研究论文的智能助手,当然大家可以自定义自己的prompt  开始问答 可以看到效果很强 提取 pdf 文本,以便后续处理。 由于 OpenAI API 对 Token 数量

    2023年04月08日
    浏览(47)
  • 通过RegExp实现 element UI tree 高亮显示(样式改变)搜索框过滤内容

            通过RegExp对象动态的实现字体样式的添加与删除。 element UI 中,树形控件进行过滤操作时,经常要求所搜字体进行一个高亮显示。         树形控件中提供了一个Attributes(属性) : filter-node-method  解释为: 对树节点进行筛选时执行的方法,返回 true 表示这个节

    2023年04月08日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包