flutter 高亮字符,富文本

高亮【keywords】关键字

javascript 复制代码
import 'package:flutter/material.dart';

/// 富文本,高亮字符
class HighlightedText extends StatelessWidget {
  final String text;
  final List<String> keywords;  //关键字
  final Color highlightColor;    //高亮颜色
  final TextStyle normalStyle;   //正常字体样式
  final TextStyle highlightStyle;  //高亮字体样式
  final int? maxLines;
  final TextOverflow overflow;
  final TextAlign textAlign;

  const HighlightedText({
    super.key,
    required this.text,
    required this.keywords,
    this.highlightColor = Colors.red,
    this.normalStyle = const TextStyle(),
    this.highlightStyle = const TextStyle(),
    this.textAlign = TextAlign.start,
    this.maxLines,
    this.overflow = TextOverflow.ellipsis,
  });

  @override
  Widget build(BuildContext context) {
    /// 如果没有关键词,直接返回普通文本
    if (keywords.isEmpty || text.isEmpty) {
      return Text(text, style: normalStyle);
    }

    /// 过滤掉空关键词
    final validKeywords = keywords.where((keyword) => keyword.isNotEmpty).toList();
    if (validKeywords.isEmpty) {
      return Text(text, style: normalStyle);
    }

    /// 创建正则表达式来匹配所有关键词(按长度降序排列,避免短关键词优先匹配)
    validKeywords.sort((a, b) => b.length.compareTo(a.length));

    final pattern = RegExp(
      validKeywords.map((keyword) => RegExp.escape(keyword)).join('|'),
      caseSensitive: false,
    );

    final matches = pattern.allMatches(text);
    final spans = <TextSpan>[];
    int lastEnd = 0;

    /// 遍历所有匹配项
    for (final match in matches) {
      /// 添加匹配前的普通文本
      if (match.start > lastEnd) {
        spans.add(TextSpan(
          text: text.substring(lastEnd, match.start),
          style: normalStyle,
        ));
      }

      /// 获取匹配的文本
      final matchedText = text.substring(match.start, match.end);

      /// 添加高亮的关键词 - 修复样式合并问题
      spans.add(TextSpan(
        text: matchedText,
        style: highlightStyle.merge(TextStyle(
          color: highlightColor,
          fontWeight: FontWeight.bold,
        )),
      ));

      lastEnd = match.end;
    }

    /// 添加剩余的普通文本
    if (lastEnd < text.length) {
      spans.add(TextSpan(
        text: text.substring(lastEnd),
        style: normalStyle,
      ));
    }

    /// 如果没有匹配到任何关键词,返回普通文本
    if (spans.isEmpty) {
      return Text(text, style: normalStyle);
    }

    return RichText(
      maxLines: maxLines,
      overflow: overflow,
      textAlign: textAlign,
      text: TextSpan(children: spans),
    );
  }
}
相关推荐
xmdy58663 小时前
Flutter + 开源鸿蒙跨端实战|基于空间地理信息的**城市全域智慧泊车调度与多维运维管理平台** Day1 项目架构基座与工程化环境搭建
flutter·开源·harmonyos
KillerNoBlood3 小时前
2026移动端跨平台开发面经总结
android·算法·flutter·ios·移动开发·鸿蒙·kmp
xmdy58665 小时前
Flutter+开源鸿蒙全域智慧泊车调度管理平台 Day4 订单全流程闭环+支付核验+会员权益+个人中心开发
flutter·开源·harmonyos
W蘭6 小时前
Flutter从入门到实战-01-Dart语言基础
flutter
xuankuxiaoyao6 小时前
Vue.js 插槽、作用域插槽、商品、阶段案例
android·vue.js·flutter
恋猫de小郭6 小时前
终于,Flutter 修复 Android 中文字体异常,但是很草台,不知怎么吐槽
android·前端·flutter
xmdy58666 小时前
Flutter + 开源鸿蒙跨端实战|基于空间地理信息的城市全域智慧泊车调度与多维运维管理平台 Day3
flutter·华为·开源
UnicornDev7 小时前
【Flutter x HarmonyOS 6】魔方计时APP——挑战页面的UI设计
flutter·ui·华为·harmonyos·鸿蒙
张风捷特烈8 小时前
状态管理大乱斗#08 | MobX 源码评析 - 透明魔法
android·前端·flutter
西西学代码9 小时前
Flutter---RichText(混合文本样式)
flutter