我正在尝试建立一个Instagram的克隆,我想如果用户在评论中标记某人,标记文本应显示为蓝色(就像在真实的的Instagram中一样)。Example。我已经使用regex来识别文本中的标签,但不知道如何给它们着色,因为用户可以在评论中的任何地方放置标签。我试着把RichText小部件和TextSpan沿着使用,但很快意识到它太硬编码了。有没有直接简单的方法来解决这个问题?PS:抱歉标题不好...
RichText
TextSpan
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列表中。当你使用这个列表时,请按如下方式使用它:
_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), ); }, ),
1条答案
按热度按时间pftdvrlh1#
为此,首先创建一个字符串列表:
然后创建一个函数,当某人被标记时,该函数将识别:
然后在TextField的onChange方法中使用此函数:
这将把标签放在
_tags
列表中。当你使用这个列表时,请按如下方式使用它: