flutter 一段长文本实现检索功能,检索的文本加粗标红

news2024/10/10 19:29:02

先来看效果
在这里插入图片描述
做这个功能的原因,因为日志比较长,内容很多,找起来非常不方便
只是简单的加粗标红的话,用TextSpan自己也可以做,主要日志还涉及选择复制,涉及的东西很多,想到了 extended_text,偷师了一下。
extended_text 并不能直接拿来使用,需要添加specialTextSpanBuilder来筛选搜索的关键词。

CommonSelectionArea(
                      child:
                      ExtendedText(
                        log,
                        softWrap: true,
                        style: const AppTextStyleData(
                            color: AppColor.black,
                            fontSize: 14,
                            fontWeight: FontWeight.w400,
                            height: 1.5)
                            .ts,
                        specialTextSpanBuilder: (flag??'').isEmpty? null:MySpecialTextSpanBuilder(flag??''),
                      ).makeConstraints((make) {
                        make.top.bottom.equalTo(4);
                      }),
                    );

CommonSelectionArea 用的是SelectionArea 系统组件,SelectionArea提供适应不同平台的选择控件。用于在特定屏幕上启用选择功能。selectionControls 可以自定义选择控件。

class CommonSelectionArea extends StatelessWidget {
  const CommonSelectionArea({
    super.key,
    required this.child,
    this.joinZeroWidthSpace = false,
  });
  final Widget child;
  final bool joinZeroWidthSpace;

  @override
  Widget build(BuildContext context) {
    SelectedContent? selectedContent;
    return SelectionArea(
      selectionControls: MyTextSelectionControls(),
      contextMenuBuilder:
          (BuildContext context, SelectableRegionState selectableRegionState) {
        return AdaptiveTextSelectionToolbar.buttonItems(
          buttonItems: <ContextMenuButtonItem>[
            ContextMenuButtonItem(
              onPressed: () {
                selectableRegionState
                    .copySelection(SelectionChangedCause.toolbar);

                // remove zeroWidthSpace
                if (joinZeroWidthSpace) {
                  Clipboard.getData('text/plain').then((ClipboardData? value) {
                    if (value != null) {
                      // remove zeroWidthSpace
                      final String? plainText = value.text?.replaceAll(
                          ExtendedTextLibraryUtils.zeroWidthSpace, '');
                      if (plainText != null) {
                        Clipboard.setData(ClipboardData(text: plainText));
                      }
                    }
                  });
                }
              },
              type: ContextMenuButtonType.copy,
            ),
            ContextMenuButtonItem(
              onPressed: () {
                selectableRegionState.selectAll(SelectionChangedCause.toolbar);
              },
              type: ContextMenuButtonType.selectAll,
            ),
            // ContextMenuButtonItem(
            //   onPressed: () {
            //     launchUrl(Uri.parse(
            //         'mailto:xxx@live.com?subject=extended_text_share&body=${selectedContent?.plainText}'));
            //     selectableRegionState.hideToolbar();
            //   },
            //   type: ContextMenuButtonType.custom,
            //   label: 'like',
            // ),
          ],
          anchors: selectableRegionState.contextMenuAnchors,
        );
      },
      onSelectionChanged: (SelectedContent? value) {
        print(value?.plainText);
        selectedContent = value;
      },
      child: child,
    );
  }
}

MySpecialTextSpanBuilder 继承SpecialTextSpanBuilder,重写createSpecialText 方法。

class MySpecialTextSpanBuilder extends SpecialTextSpanBuilder {
  MySpecialTextSpanBuilder(
       this.searchFlag
      );
  String  searchFlag;
  @override
  SpecialText? createSpecialText(String flag,
      {TextStyle? textStyle,
      SpecialTextGestureTapCallback? onTap,
      int? index}) {
    if (searchFlag == ''||searchFlag.isEmpty) {
      return null;
    }
    if (flag == ''||flag.isEmpty) {
      return null;
    }

    // index is end index of start flag, so text start index should be index-(flag.length-1)
    if (isStart(flag,searchFlag)) {
      return SelectText(
        textStyle,
        onTap,
        searchFlag,
        start: index!- (searchFlag.length - 1) ,
      );
    }
    return null;
  }
}

SelectText 为关键词的TextSpan 呈现。

class SelectText extends SpecialText {
  SelectText(TextStyle? textStyle, SpecialTextGestureTapCallback? onTap,this.searchFlag,
      {required this.start})
      : super(searchFlag,'', textStyle, onTap: onTap);
  final int start;
  String searchFlag;
  @override
  InlineSpan finishText() {
    final TextStyle? textStyle = (this.textStyle ?? const TextStyle())
        .copyWith(color: Colors.red, fontSize: 14.0,fontWeight: FontWeight.w600);
    final TextStyle? textStyle2 = (this.textStyle ?? const TextStyle())
        .copyWith(color: Colors.black, fontSize: 14.0);
    // final String atText = toString();
    // print("--------startFlag:$startFlag---getContent:${getContent()}---endFlag:$endFlag");

    return TextSpan(
        text: startFlag,
        style: textStyle,
        children: <InlineSpan>[
          TextSpan(
            text: getContent(),
            style:textStyle2,
          ),
        ],
      );
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2202846.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Python的摄影平台交流系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

美团Java一面

美团Java一面 9.24一面&#xff0c;已经寄了 收到的第一个面试&#xff0c;表现很不好 spring bean生命周期 作用域&#xff08;忘完了&#xff09; 为什么用redis缓存 redis和数据库的缓存一致性问题 redis集群下缓存更新不一致问题 aop说一下 arraylist和linkedlist 数据库的…

H264重点笔记记录

H264格式 目前视频中的H.264流行的NALU包装方式有两种&#xff0c;一种叫做annexB&#xff0c;一种叫做avcC。对于这两种格式&#xff0c;不同的厂商支持程度也不太一样&#xff0c;例如&#xff0c;Android硬解码MediaCodec只接受annexB格式的数据&#xff0c;而Apple的Video…

AI绘画,AI生成图片

分享一个可以免费使用的AI生成图片的网站&#xff1a; https://openart.aihttps://openart.ai/create 1、登陆后点击右上角create 2、在创建页面左侧输入描述文案&#xff0c;下面调整生成图片张数&#xff0c;点击create&#xff0c;右边即可生成 我这里输入了在吃麦当劳的超…

【bug】paddleocr draw_ocr_box_txt ValueError: incorrect coordinate type

【bug】paddleocr draw_ocr_box_txt ValueError: incorrect coordinate type 环境 python 3.10.15pillow 10.4.0 paddleocr 2.8.1错误详情 错误文本 Traceback (most recent call last):....draw_left.polygon(box, fillcolor)ValueError: inco…

社交媒体对人际关系的影响:Facebook的案例分析

随着社交媒体的快速发展&#xff0c;人们的沟通方式和人际关系发生了深刻变化。作为全球最大的社交网络之一&#xff0c;Facebook在这一进程中扮演了重要角色。本文将分析Facebook如何影响人际关系&#xff0c;包括沟通方式的转变、情感连接的变化以及社交互动的质量。 1. 沟通…

echarts的option,设置折线图鼠标悬浮显示数据

在series平级位置加代码 效果看起来还不错

深度学习:词嵌入embedding和Word2Vec模型

目录 前言 一、词嵌入&#xff08;Embedding&#xff09; 1.传统自然语言处理问题 2.什么是词嵌入 3.主要特点 二、Word2vec模型 1.连续词袋模型&#xff08;CBOW&#xff09; 2.跳字模型&#xff08;Skip-gram&#xff09; 三、CBOW模型训练过程 前言 在机器学习里的…

包材推荐中的算法应用|得物技术

目录 一、业务背景 二、算法架构 规则算法 三、算法原理 装箱装袋 四、衍生应用 切箱合包箱型设计包装方案推荐 五、作者结语 一、业务背景 任何一家电商的商品出库场景中&#xff0c;都涉及到打包——即把订单中的商品用包材进行包裹&#xff0c;常见的打包方式有装袋和装箱。…

Lazada该怎么直播?开播需要有哪些条件?

随着电商平台的快速发展&#xff0c;直播电商已成为一种重要的销售和营销手段。作为东南亚领先的电商平台之一&#xff0c;Lazada也提供了直播功能——LazLive&#xff0c;使商家和品牌能够通过直播与消费者进行实时互动&#xff0c;推广产品并提升销量。要在Lazada上顺利进行直…

bmp格式如何转换成jpg?5个软件帮助你快速转换文件格式

bmp格式如何转换成jpg&#xff1f;5个软件帮助你快速转换文件格式 将BMP格式转换为JPG格式是许多人在处理图片文件时常遇到的需求。BMP是一种无压缩的图像格式&#xff0c;占用空间较大&#xff0c;而JPG是一种有压缩的图片格式&#xff0c;能大幅减少文件大小&#xff0c;更适…

链表的回顾与总结(一)正序、逆序、有序、插入、修改、删除

逆序链表 #include<iostream> using namespace std; struct node {int data;node* next; };//最好不要全局定义指针&#xff0c;很麻烦 void show(node* head) {while (head){cout << head->data << ;head head->next;} } int main() {int i, j, k…

链表的回顾与总结(二)有序链表合并、约瑟夫问题

两个有序链表的合并 #include<iostream> using namespace std; struct node {int num;node* next; }; void show(node* head) {while (head){cout << head->num << ;head head->next;} } void add(node* head1, node* head2,node*&head3) {hea…

东营市自闭症寄宿学校,专注提供个性化教育

自闭症&#xff0c;这个听起来遥远而陌生的词汇&#xff0c;实际上正在影响着越来越多的家庭。自闭症儿童&#xff0c;被亲切地称为“星星的孩子”&#xff0c;他们活在自己的世界里&#xff0c;对周围的一切往往视而不见、听而不闻。然而&#xff0c;在广州的星贝育园自闭症儿…

万恶之源:端口不通

解决方案 本地端口开放&#xff0c;第三方使用者无法访问&#xff0c;原因无非有三&#xff1a; 1、基础网络不通 网不通&#xff0c;别说端口了&#xff0c;连ping都没办法&#xff1a;因此&#xff0c;请首先检查双方网络基础环境是否互通 2、防火墙拦截 新开的服务器&#x…

P4可编程技术详解:从理论到硬件实现

P4的诞生 为打破传统的固定封装模式&#xff0c;充分解放数据平面的编程能力&#xff0c;Nick McKeown领导的斯坦福大学研究团队于2014年提出可编程处理语言P4。借助P4的数据平面编程能力&#xff0c;用户可在网卡、交换机、路由器等网络设备上实现包括VXLAN、MPLS等在内的各种…

Docker容器不断重启问题

1. compose配置文件 docker-compose.yml services:node_app:image: dockerproxy.cn/node:lts-bullseye-slimcontainer_name: node_appnetworks:macvlan_net:ipv4_address: 192.168.2.3# 挂载的卷标volumes:- app:/app# 工作目录working_dir: /app# 自动重启restart: always# …

系统移植三

一、设备树 设备树&#xff08;Device Tree&#xff09;是 Linux 系统中用于描述硬件信息的一种机制&#xff0c;尤其在 ARM 平台上广泛使用。在早期版本的 Linux&#xff08;如 2.6 及之前&#xff09;&#xff0c;设备的硬件信息通常是通过硬编码方式写在平台相关的文件中。…

python爬虫--tx动漫完整信息抓取

python爬虫--tx动漫完整信息抓取 一、采集主页信息二、采集详情页信息三、完整代码一、采集主页信息 先看一下采集到的信息,结果保存为csv文件: 打开开发者工具,找到数据接口。 使用xpath提取详情页url。 二、采集详情页信息 如上图所示,使用xpath提取详情页的标题、作…

CPU超线程技术是什么,怎么启用超线程技术

超线程技术是一种允许单个物理CPU核心模拟成两个逻辑核心的技术&#xff0c;从而提升处理器的并行性能和效率。以下是对超线程技术的详细介绍&#xff1a; 基本概念&#xff1a;超线程&#xff08;Hyper-Threading&#xff0c;HT&#xff09;是Intel公司研发的一种技术&#x…