dart - 在 Flutter 上显示带有表情符号的文本

Question

我有一些包含表情符号的文本，我正试图在文本小部件上显示它们。但是，它们似乎显示为外来字符。 Flutter 是否支持显示表情符号？应该适用于 iOS 和 Android

Answer 1

问题

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

解决方案

我确定的解决方案是使用自定义表情符号字体，例如 Emoji One和 RichText 小部件，而不是基本的 Text 小部件。

有了这个，你可以简单地拥有:

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

广义解

有了这个想法，我们甚至可以创建一个给定字符串的自定义小部件，构建一个 RichText 对象，其中所有 TextSpan 都是自动创建的:

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🌈');

这样做的好处是可以在您的应用上获得一致的表情符号支持，您可以在不同平台上进行控制。

缺点是它会为您的应用添加一些 MB。