如何将自定义EmojiText组件与AutoSizeText的自动缩放功能结合使用？

嘿，我之前也碰到过类似的困扰，给你两个实用的解决思路，亲测有效哦：

方案一：用AutoSizeText.rich + TextSpan实现混合样式与自动缩放 #

AutoSizeText其实不止能传普通字符串，它的rich构造函数支持传入TextSpan，这样我们就能给文本里的不同片段设置不同样式（包括你的自定义emoji字体），同时保留自动缩放的核心功能。

具体做法是：把你的文本拆分成普通文本和自定义emoji两部分，分别生成对应的TextSpan——普通文本用默认样式，emoji部分指定你的自定义字体，最后把这些TextSpan集合传给AutoSizeText.rich就行。

举个代码例子：

AutoSizeText.rich(
  TextSpan(
    children: _splitTextAndEmojis(yourContent, emojiFont: "YourCustomEmojiFont"),
  ),
  maxLines: 2,
  minFontSize: 10,
  maxFontSize: 32,
  overflow: TextOverflow.ellipsis,
)

// 辅助方法：拆分文本和emoji，生成对应的TextSpan列表
List<TextSpan> _splitTextAndEmojis(String content, {required String emojiFont}) {
  final spans = <TextSpan>[];
  // 这里替换成你识别自定义emoji的逻辑，比如用正则匹配你的emoji字符范围或特定标识
  content.splitMapJoin(
    RegExp(r'[你的自定义emoji匹配规则]'),
    onMatch: (match) {
      spans.add(TextSpan(
        text: match.group(0),
        style: TextStyle(fontFamily: emojiFont),
      ));
      return '';
    },
    onNonMatch: (nonMatch) {
      spans.add(TextSpan(text: nonMatch));
      return '';
    },
  );
  return spans;
}

方案二：改造你的EmojiText组件，内置AutoSizeText逻辑 #

如果不想改变现有代码里调用EmojiText的方式，那可以直接改造你的EmojiText组件，让它内部用AutoSizeText.rich来渲染内容，把原来的emoji处理逻辑和AutoSizeText的缩放能力整合到一起。

改造后的EmojiText示例：

class EmojiText extends StatelessWidget {
  final String text;
  final String emojiFont;
  final double minFontSize;
  final double maxFontSize;
  final int maxLines;

  const EmojiText({
    super.key,
    required this.text,
    required this.emojiFont,
    this.minFontSize = 12,
    this.maxFontSize = 48,
    this.maxLines = 1,
  });

  @override
  Widget build(BuildContext context) {
    // 直接用AutoSizeText.rich作为底层渲染
    return AutoSizeText.rich(
      TextSpan(children: _buildEmojiSpans(text)),
      minFontSize: minFontSize,
      maxFontSize: maxFontSize,
      maxLines: maxLines,
      overflow: TextOverflow.ellipsis,
    );
  }

  // 保留你原来EmojiText里处理emoji的逻辑，生成TextSpan列表
  List<TextSpan> _buildEmojiSpans(String text) {
    final spans = <TextSpan>[];
    // 这里放你原来识别和替换emoji的代码，比如把特定字符替换成带自定义字体的TextSpan
    // 示例逻辑（根据你的实际需求调整）：
    for (final char in text.runes) {
      final charStr = String.fromCharCode(char);
      if (_isCustomEmoji(charStr)) { // 你的emoji判断方法
        spans.add(TextSpan(
          text: charStr,
          style: TextStyle(fontFamily: emojiFont),
        ));
      } else {
        spans.add(TextSpan(text: charStr));
      }
    }
    return spans;
  }

  bool _isCustomEmoji(String char) {
    // 这里实现你的自定义emoji判断逻辑，比如检查是否在你的emoji集合里
    return ['😀', '😎', '🤩'].contains(char); // 示例集合
  }
}

这样改造后，你原来怎么用EmojiText，现在还怎么用，它已经自带了AutoSizeText的自动缩放功能啦！

备注：内容来源于stack exchange，提问作者progNewbie