如果文本包含井号“#”，则更改文本颜色

Question

基本上我想实现一个"hashtag"的功能。我很难制定逻辑，其中如果文本包含“#”（例如，我喜欢#flutter），#flutter 文本会将其颜色更改为蓝色。

你能给我一个提示，告诉我要使用什么小部件吗？或者有这个的包吗？

我好像找不到类似的问题。

Answer 1

希望这有效！

Widget _getColoredHashtagText(String text) {
  if (text.contains('#')) {
    var preHashtag = text.substring(0, text.indexOf('#'));
    var postHashtag = text.substring(text.indexOf('#'));
    var hashTag = postHashtag;
    var other;
    if (postHashtag.contains(' ')) {
      hashTag = postHashtag.substring(0, postHashtag.indexOf(' '));
      other = postHashtag.substring(postHashtag.indexOf(' '));
    }
    return RichText(
      text: TextSpan(
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          TextSpan(text: preHashtag),
          TextSpan(text: hashTag, style: TextStyle(color: Colors.blue)),
          TextSpan(text: other != null ? other : ""),
        ],
      ),
    );
  } else {
    return Text(text);
  }
}

Answer 2

使用 RichText 您可以创建具有不同样式的文本，其中每个文本都是一个 TextSpan，如下所示：

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: "I love "),
      TextSpan(text: "#flutter", style: TextStyle(color: Colors.blue)),
    ],
  ),
)

您可以使用 String 并创建文本和主题标签列表，然后映射该列表检查：如果元素包含 #，则使用蓝色的 TextSpan，否则使用默认值 TextSpan.

这是一个快速运行的示例，您可以尝试改进它：

RichText _convertHashtag(String text) {
  List<String> split = text.split(RegExp("#"));
  List<String> hashtags = split.getRange(1, split.length).fold([], (t, e) {
    var texts = e.split(" ");
    if (texts.length > 1) {
      return List.from(t)
        ..addAll(["#${texts.first}", "${e.substring(texts.first.length)}"]);
    }
    return List.from(t)..add("#${texts.first}");
  });
  return RichText(
    text: TextSpan(
      children: [TextSpan(text: split.first)]..addAll(hashtags
          .map((text) => text.contains("#")
              ? TextSpan(text: text, style: TextStyle(color: Colors.blue))
              : TextSpan(text: text))
          .toList()),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.indigo,
    appBar: AppBar(title: Text('#hashtag')),
    body: Center(
      child: _convertHashtag("I love #flutter and #android very much"),
    ),
  );
}

Answer 3

HashTagText

https://pub.dev/packages/hashtagtext#-installing-tab-

我发布了这个库。它将自动检测字符串中的散列标签并突出显示。

dependencies:
  hashtagtext: ^0.0.1

例子

HashTagText(text: "I will found and #highlight all #tag and #make it #clickable", onHashTagClick: (tag){
              print("You clicked on $tag");
            },)

如果文本包含井号“#”，则更改文本颜色

Changing text color if text contains hashtag "#"

dart

flutter

flutter-test

flutter-layout