如何在颤动中使用 textspan 用不同的装饰来装饰不同的单词

Posted 2023-02-23

【中文标题】如何在颤动中使用 textspan 用不同的装饰来装饰不同的单词

【英文标题】：how to decorate different words with different decorations with textspan in flutter

【发布时间】：2020-04-01 09:29:44

【问题描述】：

我正在尝试从字符串中获取一些单词，并为这些单词赋予不同的颜色和装饰。到目前为止，我已经能够使用下面的代码和it works for single word 为一个单词做到这一点。我尝试了其他几种方法，但似乎都没有使用多个单词。我怎样才能用多个单词来实现这一点。

适用于单个单词的代码

   List<TextSpan> _getSpans(String text, String matchWord, TextStyle style) 

      final style2 = TextStyle(color: Colors.blue,
      );

      List<TextSpan> spans = [];
      int spanBoundary = 0;

      do 

        // look for the next match
        final startIndex = text.indexOf(matchWord, spanBoundary);

        // if no more matches then add the rest of the string without style
        if (startIndex == -1) 
          spans.add(TextSpan(text: text.substring(spanBoundary)));
          return spans;
        

        // add any unstyled text before the next match
        if (startIndex > spanBoundary) 
          spans.add(TextSpan(text: text.substring(spanBoundary, startIndex)));
        

        // style the matched text
        final endIndex = startIndex + matchWord.length;
        final spanText = text.substring(startIndex, endIndex);
        spans.add(TextSpan(text: spanText.replaceAll(RegExp(r"`"), "\n"), style:style,
        //recognizer: TapGestureRecognizer()..onTap = () 
        // do something
        //,
        ));

        // mark the boundary to start the next search from
        spanBoundary = endIndex;

      // continue until there are no more matches
       while (spanBoundary < text.length);

      return spans;
    

【参考方案1】：

嘿，你可以使用这样的东西而不使用正则表达式：

 List<TextSpan> _getSpans(
    String text,
    List<String> matchWords,
    TextStyle style,
  ) 
    var wordsMap = Map.fromIterable(text.split(' '),
        key: (v) => v, value: (v) => TextSpan(text: v));

    for (var matchWord in matchWords) 
      if (wordsMap.containsKey(matchWord)) 
        wordsMap[matchWord] = TextSpan(text: matchWord, style: style);
      
    

    var spanList = wordsMap.values.toList();

    //adding missing spaces
    for (var i = 0; i < spanList.length - 1; ++i) 
      spanList[i] =
          TextSpan(text: spanList[i].text + ' ', style: spanList[i].style);
    

    return spanList;
  

【讨论】：

我不知道用户会输入什么类型的文本数据，正则表达式会帮助我在文本中获得一些特定的模式并突出显示它们