如何在Flutter中的Text中用不同的颜色突出显示搜索到的文本

sauutmhj 于 2022-11-17 发布在 Flutter

关注(0)|答案(1)|浏览(207)

我正在为RichText创建一个演示，其中有一个文本
文本小部件显示一个字符串'Welcome to flutter'，我有一个文本字段，用于在该字符串中输入搜索词。还有一个按钮，用于显示搜索结果
我几乎已经完成了精确的单词搜索，但现在我想实现它也应该突出显示时，这个词是半输入一样，'Flut'，这4个字符应该显示不同的颜色.

Widget build(BuildContext context) {
    String mystring = 'Welcome to Flutter';
    mywords = mystring.split(' ');
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 30.0, horizontal: 10),
          child: Column(
            children: [
              SizedBox(
                height: 20,
              ),
              TextField(
                controller: txtsearch,
              ),
              ElevatedButton(onPressed: (){setState(() {

              });}, child: Text('Search Word in String')),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                height: 20,
              ),
              RichText(
                  text: TextSpan(
                style: TextStyle(fontSize: 20, color: Colors.black),
                children: mywords.map((e) {
                  if(e!=txtsearch.text)
                  return TextSpan(text: e+' ');
                  //and suggest me is there any other way to add space instread of the way i used
                  else
                    return TextSpan(text: e+' ',style: TextStyle(

                        color: Colors.blue));
                }).toList(),
              ))
            ],
          ),
        ),
      ),
    );
  }

flutter

来源：https://stackoverflow.com/questions/74437397/how-to-highlight-searched-text-with-different-color-in-text-in-flutter

1条答案

按热度按时间

ryevplcw1#

是否每个匹配都限制在一个单词上很重要，或者你真的希望每个子字符串都包含在整个字符串中？如果是第二种情况，你可以使用String.allMatches来找到匹配的开始和结束索引，然后从中构造一个TextSpan小部件列表。

final search = txtsearch.text.toLowerCase();
    final text = widget.text;
    final matches = search.allMatches(text.toLowerCase()).toList();
    final spans = <TextSpan>[];

    if (matches.isEmpty) {
      spans.add(TextSpan(text: text));
    } else {
      for (var i = 0; i < matches.length; i++) {
        final strStart = i == 0 ? 0 : matches[i - 1].end;
        final match = matches[i];
        spans.add(
          TextSpan(
            text: text.substring(
              strStart,
              match.start,
            ),
          ),
        );
        spans.add(
          TextSpan(
            text: text.substring(
              match.start,
              match.end,
            ),
            style: const TextStyle(color: Colors.blue),
          ),
        );
      }
      spans.add(TextSpan(text: text.substring(matches.last.end)));
    }

也许可以让循环逻辑更漂亮一点。Working dartpad here。

赞(0）回复(0）举报 2022-11-17

我来回答

如何在Flutter中的Text中用不同的颜色突出显示搜索到的文本

1条答案

相关问题

热门标签

最新问答