英文:
How to change the color of specific expressions in text in flutter
问题
我正在尝试构建一个Instagram克隆，并且我希望如果用户在评论中标记了某人，标记的文本应该显示为蓝色（就像在真正的Instagram中一样）。示例。我已经使用正则表达式从文本中识别标签，但无法弄清楚如何为它们着色，因为用户可以在评论中的任何位置放置标签。我尝试使用RichText小部件以及TextSpan，但很快意识到它太过硬编码。在这种情况下有没有直接而简单的方法？
英文:
I'm trying to build an instagram clone and I want if the user tags someone in the comments, the tag text should appear blue (as in real Instagram). Example. I've used regex to recognise the tags from the text but can't figure out how to color them as the user can place a tag anywhere in the comment. I tried using RichText widget along with TextSpan but quickly realised it was way too hardcoded. Is there any direct and easy way for this situation?
PS: Sorry for the bad title...
答案1
得分: 1
为了实现这个目标，首先创建一个字符串列表：
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),
);
},
),
英文:
To achieve this first create a list of strings:
List<String> _tags = [];
Then create a function that will recognize when someone is tagged:
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;
}
Then use this function inside TextField's onChange method:
onChanged: (value) {
setState(() {
_tags = _extractTags(value);
});
},
This will put tags inside _tags list. When you use this list, use it like below:
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),
);
},
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论