Flutter中如何便捷混合渲染Emoji与普通文本字体？

问题分析 #

你遇到的核心问题是：NotoColorEmoji仅包含Emoji字形，全局设为默认字体后普通文本因找不到对应字形渲染异常；Web端无默认适配的Emoji字体，导致Emoji显示为带叉黑块。现有逐段替换TextSpan的方案对可编辑文本（如TextField）支持不佳。

最优低成本方案：利用字体Fallback机制（推荐） #

Flutter自带字体 fallback 功能，可让系统自动为不同字符选择对应字体——普通文本用默认字体，Emoji自动 fallback 到NotoColorEmoji，无需手动拆分文本。

步骤1：配置Theme全局生效

修改你的ThemeData，将NotoColorEmoji加入fontFamilyFallback而非直接设为fontFamily：

Widget content() {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'NotoColorEmoji view',
    theme: ThemeData(
      // 可保留原有默认字体，省略则自动使用系统默认
      // fontFamily: 'Roboto', 
      fontFamilyFallback: ['NotoColorEmoji'], // 仅让Emoji使用该字体
    ),
    home: Scaffold(
      body: Text("☝️Letter Shape⭐️⭐️☝️⭐️⭐️☝️⭐️⭐️☝️⭐️⭐⭐️"),
    ),
  );
}

步骤2：针对单个可编辑文本（TextField）单独配置

如果不需要全局生效，可在TextField的style中单独设置：

TextField(
  style: TextStyle(
    fontFamilyFallback: ['NotoColorEmoji'],
  ),
  decoration: InputDecoration(hintText: '输入带Emoji的内容'),
)

备选方案：自动拆分TextSpan（适配特殊场景） #

如果fallback机制无法满足需求（如某些罕见Emoji不被匹配），可通过工具函数自动拆分文本为普通文本和Emoji对应的TextSpan，无需手动逐段检查：

import 'package:flutter/material.dart';

// 自动生成混合字体的TextSpan
TextSpan buildMixedTextSpan(String text) {
  // 匹配绝大多数常用Emoji的正则
  final emojiRegex = RegExp(r'[\p{Emoji}]', unicode: true);
  final spans = <TextSpan>[];
  int startIndex = 0;

  for (final match in emojiRegex.allMatches(text)) {
    // 添加普通文本段
    if (match.start > startIndex) {
      spans.add(TextSpan(
        text: text.substring(startIndex, match.start),
        style: TextStyle(fontFamily: null), // 使用默认字体
      ));
    }
    // 添加Emoji段
    spans.add(TextSpan(
      text: match.group(0),
      style: TextStyle(fontFamily: 'NotoColorEmoji'),
    ));
    startIndex = match.end;
  }

  // 添加剩余的普通文本
  if (startIndex < text.length) {
    spans.add(TextSpan(
      text: text.substring(startIndex),
      style: TextStyle(fontFamily: null),
    ));
  }

  return TextSpan(children: spans);
}

// 使用示例
RichText(
  text: buildMixedTextSpan("☝️Letter Shape⭐️⭐️☝️"),
)

该方案对可编辑文本的支持：可配合TextField的TextEditingController监听文本变化，实时生成对应的TextSpan用于自定义输入框样式，性能足以覆盖大多数场景。

验证效果 #

• 普通文本将使用默认字体正常渲染，Emoji则显示NotoColorEmoji的彩色样式
• Web端无需额外配置，Emoji不再显示带叉黑块

内容的提问来源于stack exchange，提问作者user48956