flutter聊天界面-Text富文本表情emoji、url、號(hào)碼展示
Text富文本表情emoji展示，主要通過實(shí)現(xiàn)Text.rich展示文本、emoji、自定義表情、URL等

一、Text及TextSpan

Text用于顯示簡單樣式文本
TextSpan它代表文本的一個(gè)“片段”，不同“片段”可按照不同的樣式顯示。

示例片段

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))

二、Text富文本表情emoji展示

Text富文本表情emoji展示主要通過RegExp匹配url、手機(jī)號(hào)碼

自定義表情的正則表達(dá)式：

String emojExpString = r"\[.{1,4}?\]";

鏈接URL的正則表達(dá)式：

String urlExpString =
        r"(http|ftp|https)://([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?";

具體實(shí)現(xiàn)代碼如下

// 富文本
class CommChatRichTextHelper {
  //圖文混排
  static getRichText(String text) {
    List<InlineSpan> textSapns = [];

    String urlExpString =
        r"(http|ftp|https)://([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?";
    String emojExpString = r"\[.{1,4}?\]";
    RegExp exp = RegExp('$urlExpString|$emojExpString');

    //正則表達(dá)式是否在字符串[input]中有匹配。
    if (exp.hasMatch(text)) {
      Iterable<RegExpMatch> matches = exp.allMatches(text);

      int index = 0;
      int count = 0;
      for (var matche in matches) {
        count++;
        String c = text.substring(matche.start, matche.end);
        //匹配到的東西,如表情在首位
        if (index == matche.start) {
          index = matche.end;
        }
        //匹配到的東西,如表情不在首位
        else if (index < matche.start) {
          String leftStr = text.substring(index, matche.start);
          index = matche.end;
          textSapns.add(
            TextSpan(
              text: spaceWord(leftStr),
              style: getDefaultTextStyle(),
            ),
          );
        }

        //匹配到的網(wǎng)址
        if (RegExp(urlExpString).hasMatch(c)) {
          textSapns.add(
            TextSpan(
              text: spaceWord(c),
              style:
                  TextStyle(color: ColorUtil.hexColor(0x3b93ff), fontSize: 16),
              recognizer: TapGestureRecognizer()
                ..onTap = () async {
                  //打開瀏覽器
                  print(c);
                },
            ),
          );
        }
        //匹配到的表情
        else if (RegExp(emojExpString).hasMatch(c)) {
          //[偷笑] 去掉[] = 偷笑
          String emojiString = c;
          textSapns.add(
            WidgetSpan(
              style: const TextStyle(height: 1.5),
              //判斷表情是否存在
              child: CommonChatEmoji.emojiIsContain(emojiString)
                  ? ImageHelper.imageNetwork(
                      imageUrl:
                          "${CommonChatEmoji.findEmojiItem(emojiString)?.url}",
                      width: 22,
                      height: 22,
                    )
                  : Text(
                      "${c}",
                      style: getDefaultTextStyle(),
                    ),
            ),
          );
        }

        //是否是最后一個(gè)表情,并且后面是否有字符串
        if (matches.length == count && text.length > index) {
          String rightStr = text.substring(index, text.length);
          textSapns.add(
            TextSpan(
              text: spaceWord(rightStr),
              style: getDefaultTextStyle(),
            ),
          );
        }
      }
    } else {
      textSapns.add(
        TextSpan(
          text: spaceWord(text),
          style: getDefaultTextStyle(),
        ),
      );
    }

    return Text.rich(TextSpan(children: textSapns));
  }

  static TextStyle getDefaultTextStyle() {
    return TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w400,
      fontStyle: FontStyle.normal,
      color: ColorUtil.hexColor(0x555555),
      decoration: TextDecoration.none,
    );
  }

  static String spaceWord(String text) {
    if (text.isEmpty) return text;
    String spaceWord = '';
    for (var element in text.runes) {
      spaceWord += String.fromCharCode(element);
      spaceWord += '\u200B';
    }
    return spaceWord;
  }
}

使用Text.rich的Widget的聊天文本氣泡

class ChatCellTextElem extends StatefulWidget {
  const ChatCellTextElem({
    Key? key,
    required this.chatMessage,
  }) : super(key: key);

  final CommonChatMessage chatMessage;

  @override
  State<ChatCellTextElem> createState() => _ChatCellTextElemState();
}

class _ChatCellTextElemState extends State<ChatCellTextElem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: buildTextContent(),
    );
  }

  Widget buildTextContent() {
    // 富文本
    return CommChatRichTextHelper.getRichText("${widget.chatMessage.text ?? ""}");
  }
}

三、小結(jié)

flutter聊天界面-Text富文本表情emoji、url、號(hào)碼展示，主要實(shí)現(xiàn)Text富文本表情emoji展示主要通過RegExp匹配url、手機(jī)號(hào)碼等

學(xué)習(xí)記錄，每天不停進(jìn)步。文章來源地址http://www.zghlxwxcb.cn/news/detail-532699.html

到了這里，關(guān)于flutter聊天界面-Text富文本表情emoji、url、號(hào)碼展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！