显示带有表情符号的文本 [英] Displaying text with Emojis on Flutter

问题描述

我有一些包含表情符号的文本，我正尝试在文本小工具上显示它们。然而，他们似乎被表现为外国角色。Fflight支持显示表情符号吗？应该同时适用于iOS和Android

推荐答案

问题

不幸的是，到目前为止，Ffltter使用的是给定平台支持的默认表情符号。因此，在构建跨平台应用程序时，您可能会遇到表情符号在某些设备上显示而不是在其他设备上显示的问题。

解决方案

我满意的解决方案是使用自定义Emoji字体，如Emoji One和RichText小部件，而不是基本的Text小部件。

使用此选项，您可以简单地拥有：

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: 'Hello',  // non-emoji characters
      ),
      TextSpan(
        text: '🧭 🏳️u200d🌈', // emoji characters
        style: TextStyle(
          fontFamily: 'EmojiOne',
        ),
      ),
    ],
  ),
);

通用解决方案

有了这个想法，我们甚至可以创建一个定制的小部件，它给定一个字符串，构建一个自动创建了所有TextSpan的RichText对象：

class EmojiText extends StatelessWidget {

  const EmojiText({
    Key key,
    @required this.text,
  }) : assert(text != null),
       super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: _buildText(this.text),
    );
  }

  TextSpan _buildText(String text) {
    final children = <TextSpan>[]; 
    final runes = text.runes;

    for (int i = 0; i < runes.length; /* empty */ ) {
      int current = runes.elementAt(i);

      // we assume that everything that is not
      // in Extended-ASCII set is an emoji...
      final isEmoji = current > 255;
      final shouldBreak = isEmoji
        ? (x) => x <= 255 
        : (x) => x > 255;

      final chunk = <int>[];
      while (! shouldBreak(current)) {
        chunk.add(current);
        if (++i >= runes.length) break;
        current = runes.elementAt(i);
      }

      children.add(
        TextSpan(
          text: String.fromCharCodes(chunk),
          style: TextStyle(
            fontFamily: isEmoji ? 'EmojiOne' : null,
          ),
        ),
      );
    }

    return TextSpan(children: children);
  } 
} 

可用作：

EmojiText(text: 'Hello there: 🧭 🏳️u200d🌈');

这样做的好处是在您的应用程序上拥有一致的表情符号支持，您可以在不同的平台上控制这些表情符号。

缺点是它会向您的应用程序添加一些MBs。

这篇关于显示带有表情符号的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！