如何在flutter中更改文本中特定表达式的颜色

polhcujo  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(89)

我正在尝试建立一个Instagram的克隆,我想如果用户在评论中标记某人,标记文本应显示为蓝色(就像在真实的的Instagram中一样)。Example。我已经使用regex来识别文本中的标签,但不知道如何给它们着色,因为用户可以在评论中的任何地方放置标签。我试着把RichText小部件和TextSpan沿着使用,但很快意识到它太硬编码了。有没有直接简单的方法来解决这个问题?
PS:抱歉标题不好...

pftdvrlh

pftdvrlh1#

为此,首先创建一个字符串列表:

List<String> _tags = [];

然后创建一个函数,当某人被标记时,该函数将识别:

List<String> _extractTags(String text) {
    List<String> tags = [];
    RegExp exp = RegExp(r'\B@\w+');
    Iterable<RegExpMatch> matches = exp.allMatches(text);
    for (RegExpMatch match in matches) {
      tags.add(match.group(0));
    }
    return tags;
  }

然后在TextField的onChange方法中使用此函数:

onChanged: (value) {
                setState(() {
                  _tags = _extractTags(value);
                });
              },

这将把标签放在_tags列表中。当你使用这个列表时,请按如下方式使用它:

ListView.builder(
  itemCount: _tags.length,
  itemBuilder: (BuildContext context, int index) {
    String tag = _tags[index];
    TextStyle defaultStyle = TextStyle(fontSize: 16);
    TextStyle tagStyle = TextStyle(color: Colors.blue, fontSize: 16);
    List<TextSpan> spans = [];
    if (tag == null) {
      spans.add(TextSpan(text: '', style: defaultStyle));
    } else {
      String text = tag.substring(1);
      spans.add(TextSpan(text: '@', style: defaultStyle));
      spans.add(TextSpan(text: text, style: tagStyle));
    }
    return RichText(
      text: TextSpan(children: spans),
    );
  },
),

相关问题