Flutter 搜索内容高亮显示

Flutter 搜索内容高亮显示方法:

///searchContent    输入的搜索内容
///textContent      需要显示的文字内容
///frontContent     需要另外添加在最前面的文字
///fontSize         需要显示的字体大小
///fontColor        需要显示的正常字体颜色
///selectFontColor  需要显示的搜索字体颜色
List<TextSpan> getTextSpanList(String textContent,
    {String searchContent = '',
    String frontContent = '',
    int fontSize = 17,
    Color fontColor = Color(0xff3c3c3c),
    Color selectFontColor = Color(0xff2b78d6)}) {
  List<TextSpan> textSpanList = List();

  if (frontContent.isEmpty == false) {
    textSpanList.add(TextSpan(
        text: frontContent,
        style: TextStyle(fontSize: tyF(fontSize), color: fontColor)));
  }

  ///搜索内容不为空并且 显示内容中存在与搜索内容相同的文字
  if (searchContent != null &&
      searchContent.isEmpty == false &&
      textContent.contains(searchContent)) {
    List<Map> _strMapList = List();
    bool _isContains = true;
    while (_isContains) {
      int startIndex = textContent.indexOf(searchContent);
      String showStr =
          textContent.substring(startIndex, startIndex + searchContent.length);
      Map _strMap;
      if (startIndex > 0) {
        String normalStr = textContent.substring(0, startIndex);
        _strMap = Map();
        _strMap['content'] = normalStr;
        _strMap['isHighlight'] = false;
        _strMapList.add(_strMap);
      }
      _strMap = Map();
      _strMap['content'] = showStr;
      _strMap['isHighlight'] = true;
      _strMapList.add(_strMap);
      textContent = textContent.substring(
          startIndex + searchContent.length, textContent.length);

      _isContains = textContent.contains(searchContent);
      if (!_isContains && textContent != '') {
        _strMap = Map();
        _strMap['content'] = textContent;
        _strMap['isHighlight'] = false;
        _strMapList.add(_strMap);
      }
    }
    _strMapList.forEach((map) {
      textSpanList.add(TextSpan(
          text: map['content'],
          style: TextStyle(
              fontSize: tyF(fontSize),
              color: map['isHighlight'] ? selectFontColor : fontColor)));
    });
  } else {
    ///正常显示所有文字
    textSpanList.add(TextSpan(
      text: textContent,
      style: TextStyle(fontSize: tyF(fontSize), color: fontColor),
    ));
  }
  return textSpanList;
}

调用方法:

RichText(
    text: TextSpan(
        children: getTextSpanList(
            'fmsekljjklgzaagfngkndgkaaffakaf',
             searchContent: 'a')))

运行效果:
在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值