Flutter自定义输入框同时出现多种字体颜色

Flutter自定义输入框同时出现多种字体颜色

  • 效果展示
  • 基本逻辑
    • 代码示例

效果展示

输入框内效果
在这里插入图片描述

基本逻辑

主要通过重写TextEditingController中的buildTextSpan方法实现,通过在buildTextSpan中将内容手动切割(本人通过正则表达式将#这些话题分割开来),然后组装成为一个TextSpan 返回出去

buildTextSpan 是一个用于构建 TextSpan 对象的方法,它通常用于自定义文本样式或在 RichText 中构建富文本。

代码示例

class CustomTextEditingController extends TextEditingController {

  //正则表达式切割文本内容
  List<String> splitByHash(String input) {
    RegExp regex = RegExp(r'#([a-zA-Z0-9\u4e00-\u9fa5\?]+)');
    Iterable<Match> matches = regex.allMatches(input);

    List<String> result = [];
    int lastIndex = 0;

    for (Match match in matches) {
      String matchText = match.group(0)!;
      int matchIndex = match.start;

      // Add the text before the match
      if (matchIndex > lastIndex) {
        result.add(input.substring(lastIndex, matchIndex));
      }

      // Add the matched text
      result.add(matchText);

      lastIndex = matchIndex + matchText.length;
    }

    // Add the remaining text after the last match
    if (lastIndex < input.length) {
      result.add(input.substring(lastIndex));
    }

    return result;
  }
  
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {

    List<AtModel> lis=[];

    // 获取文本框中的文本
    String value = text;
    List<String> result = splitByHash(value);
    //判断内容段中是否有想要变色的关键字符#,将内容封装到对象中,对象为自定义对象,id用不到所以默认值为1,body为内容段,isAt为是否变色
    for(int i=0;i<result.length;i++){
      if(result[i].isNotEmpty && result[i][0] == '#'){
        AtModel at=new AtModel(id: "1", body: result[i], isAt: true);
        lis.add(at);
      }else{
        AtModel at=new AtModel(id: "1", body: result[i], isAt: false);
        lis.add(at);
      }
    }
    // 创建一个默认样式
    TextStyle defaultStyle = style ?? TextStyle();
	//设置想要变颜色的TextSpan
    TextSpan text_topic(String body){
      return TextSpan(
        text: '${body}',
        style: TextStyle(
          color: Colors.lightBlue, // 设置为蓝色
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      );
    }

    TextSpan text_span(String body){
      return TextSpan(
        text: '${body}',
        style: TextStyle(
          // color: Colors.black,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      );
    }
	
	//组装组件
    List<TextSpan> listText(){
      List<TextSpan> list=[];
      for(int i=0;i<lis.length;i++){
        if(lis[i].isAt){
          list.add(text_topic(lis[i].body));
        }else{
          list.add(text_span(lis[i].body));
        }
      }
      return list;
    }



    // 创建一个富文本组件,设置不同的样式
    return TextSpan(
      style: defaultStyle,
      children: listText(),
    );
  }
}

使用时直接使用即可

//旧版本
 TextEditingController _content = TextEditingController();
 //新版本
 CustomTextEditingController _content = CustomTextEditingController();

 TextField(
        // autofocus: true,
        maxLines: 15,
        maxLength: 500,
        controller: _content,
)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

win32com打开带密码excel

简单来说给excel上加密常见的方法有两种 方法一&#xff1a; 直接修改文件属性 这种方法对应的解法是 excel DispatchEx("Excel.Application") # 启动excel excel.Visible visible # 可视化 excel.DisplayAlerts displayalerts # 是否显示警告 wb excel.Wo…

基于springboot实现旅游路线规划系统项目【项目源码+论文说明】

基于springboot实现旅游路线规划系统演示 摘要 随着互联网的飞速发展以及旅游产业的逐渐升温&#xff0c;越来越多人通过互联网获取更多的旅游信息&#xff0c;包括参考旅游文纪等内容。通过参考旅游博主推荐的旅游景点和规划线路&#xff0c;参考计划着自己的旅行&#xff0c…

Git教程-Git的基本使用

Git是一个强大的分布式版本控制系统&#xff0c;它不仅用于跟踪代码的变化&#xff0c;还能够协调多个开发者之间的工作。在软件开发过程中&#xff0c;Git被广泛应用于协作开发、版本管理和代码追踪等方面。以下是一个详细的Git教程&#xff0c;我们将深入探讨Git的基本概念和…

golang 泛型详解

目录 概念 ~int vs .int 常见的用途和错误 结论&#xff1a; 概念 Go 在1.18 中添加了泛型&#xff0c;这样Go 就可以在定义时不定义类型&#xff0c;而是在使用时进行类型的定义&#xff0c;并且还可以在编译期间对参数类型进行校验。Go 目前只支持泛型方法&#xff0c;还…

css通过calc动态计算宽度

max-width: calc(100% - 40px) .m-mj-status-drawing-info-data{ display: inline-block; margin: 10px; min-width: 200px; padding: 10px;border-radius: 10px; background: #ddd;max-width: calc(100% - 40px);word-wrap: break-word;white-space: pre-line;}我开发的chatg…

python+mysql咖啡店推荐系统django+vue

(1).研究的基本内容 系统的角色分为&#xff1a; 1.管理员 2.会员 3.非会员 角色不同&#xff0c;权限也不相同 技术栈 后端&#xff1a;python 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask Python版本&#xff1a;python3.7 数据库&#xff1a;mysql5.7…

c#/ .net8 香橙派orange pi +SSD1306 oled显示屏 显示中文+英文 实例

本文使用香橙派orangepi pi 3ltsSSD1306 oled显示屏作为例子&#xff0c;其它型号的也是一样使用的 在nuget包中安装 Sang.IoT.SSD1306; 以下两个二选一 SkiaSharp;//在window下运行装这个 SkiaSharp.NativeAssets.Linux.NoDependencies;//在linux下运行一定要装这个 在c# .ne…

李宏毅机器学习入门笔记——第六节

对抗生成式网络&#xff08;GAN&#xff09; 输入一个问题输出不同的答案出来 GAN里面有生成器和鉴别器 不断对抗生成&#xff0c;进行两者的网络 算法步骤 这里输出的结果可以是分类的&#xff0c;也可以是回归的。 两者训练过程&#xff0c;是固定生成器&#xff0c;训练…

主流开发环境都有哪些?主流开发语言都有什么?

目录 一、简介&#xff1a; 二、主流开发环境&#xff1a; 三、主流开发语言&#xff1a; 四、结论&#xff1a; 一、简介&#xff1a; 在现代软件开发领域&#xff0c;选择适合自己需求的开发环境和开发语言至关重要。本文将介绍目前主流的开发环境和开发语言&#xff0c;…

深度学习--神经网络基础

神经网络 人工神经网络&#xff08; Artificial Neural Network &#xff0c; 简写为 ANN &#xff09;也简称为神经网络&#xff08; NN &#xff09;&#xff0c;是一种模仿生物神经网络结构和 功能的计算模型 。人脑可以看做是一个生物神经网络&#xff0c;由众多的 神经元…

国际黄金价格是什么?和黄金价格有何区别?

黄金是世界上最珍贵的贵金属之一&#xff0c;其价值被无数人所垂涎。而国际黄金价格作为市场上的参考指标&#xff0c;直接影响着黄金交易的买卖。那么国际黄金价格到底是什么&#xff0c;与黄金价格又有何区别呢&#xff1f;本文将为您详细解答。 国际黄金价格是指以美元计量的…

部署PhotoMaker通过堆叠 ID 嵌入自定义逼真的人物照片

PhotoMaker只需要一张人脸照片就可以生成不同风格的人物照片&#xff0c;可以快速出图&#xff0c;无需额外的LoRA培训。 安装环境 python 3.10gitVisual Studio 2022 安装依赖库 git clone https://github.com/bmaltais/PhotoMaker.git cd PhotoMaker python -m venv venv…

idea如何建立一个springboot项目

1.打开File -New-Project 2.填写相关信息&#xff0c;Name:### Type:Maven Croup、Artifact、java 版本 注&#xff1a;此时&#xff0c;第一次打开可能会报错&#xff0c;说版本不匹配。注意下方的两个红框&#xff0c;将Server URL的地址改为“https://start.aliyun.com ”…

C#理论 —— 基础语法、数据类型、变量、常量、运算符、三大结构

文章目录 1. 基础语法1.1 标识符命名规则1.2 C# 关键字1.3 C#注释 2. 数据类型2.1 值类型&#xff08;Value types&#xff09;2.2 引用类型&#xff08;Reference types&#xff09;2.2.1 对象&#xff08;Object&#xff09;类型3.2.2 动态&#xff08;Dynamic&#xff09;类…

Vue 环境安装以及项目创建

环境安装 nodejs 安装 下载地址&#xff1a;https://nodejs.org/dist/v18.16.1/ 根据系统类型选择对应安装包&#xff0c;选择安装路径那个后一直下一步即可安装完成。 配置npm 代理镜像,设置为淘宝的镜像地址&#xff08;后面按照依赖可以加速下载安装包&#xff09; npm c…

Java介绍

计算机语言历史 1、软件的分类 软件从架构上分类&#xff1a; C/S(Client/Server)&#xff1a;基于客户端和服务器 B/S(Browser/Server)&#xff1a;基于浏览器和服务器 如何区分&#xff1a;如果使用时要安装则为C/S架构的&#xff0c;如果使用时用浏览器打开则为B/S架构 由于…

RDMA技术在Apache Spark中的应用

背景介绍 在当今数据驱动的时代&#xff0c;Apache Spark已经成为了处理大规模数据集的首选框架。作为一个开源的分布式计算系统&#xff0c;Spark因其高效的大数据处理能力而在各行各业中广受欢迎。无论是金融服务、电信、零售、医疗保健还是物联网&#xff0c;Spark的应用几…

共同学习|Spring Cloud Alibaba一一sentinel介绍

Sentinel介绍 介绍 alibaba/Sentinel Wiki GitHub 1、Sentinel是什么 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度保护服务的稳定性。 Sentinel 具有以下特征&a…

集合详解-迭代器遍历-增强for-List集合-List五种遍历方式-Set集合-排序规则Comparable-双列集合

Collection集合 数组和集合的区别 相同点 都是容器,可以存储多个数据 不同点 数组的长度是不可变的,集合的长度是可变的 数组可以存基本数据类型和引用数据类型 集合只能存引用数据类型,如果要存基本数据类型,需要存对应的包装类 Collection 集合概述和使用 Collection…

安全评估与安全评价:区分核心概念

在当今信息化社会中&#xff0c;保护数据和网络安全变得尤为重要。为了确保系统和组织的安全&#xff0c;我们需要了解并正确运用安全评估和安全评价这两个核心概念。虽然它们听起来相似&#xff0c;但其实它们有着不同的定义和目的。 首先&#xff0c;安全评估是一种系统性的…