Flutter中如何复制带自定义字体（如Baybayin脚本）的文本到剪贴板？

核心限制说明 #

首先要明确：剪贴板无法直接携带字体文件，只能传递样式标记（如指定font-family）。目标应用能否显示自定义字体，完全取决于两个前提：

1. 目标应用支持粘贴富文本（能读取剪贴板中的样式信息）；
2. 目标设备/应用已安装Baybayin Neue字体。

如果目标应用未安装该字体，即便复制了富文本，最终仍会 fallback 到系统默认字体显示。

可行解决方案 #

1. 复制富文本（保留可编辑性） #

Flutter原生Clipboard API仅支持纯文本，要实现富文本复制需借助**平台通道（Platform Channel）**或第三方包，针对不同平台实现富文本剪贴板写入：

Web端实现

直接通过JS操作DOM复制带样式的文本：

import 'dart:js' as js;

void copyRichBaybayinText(String baybayinText) {
  js.context.callMethod('eval', [
    """
    const tempElement = document.createElement('div');
    tempElement.style.position = 'absolute';
    tempElement.style.left = '-9999px';
    tempElement.innerHTML = '<span style="font-family: \\\"Baybayin Neue\\\">$baybayinText</span>';
    document.body.appendChild(tempElement);
    
    const selectionRange = document.createRange();
    selectionRange.selectNode(tempElement);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(selectionRange);
    
    document.execCommand('copy');
    
    window.getSelection().removeAllRanges();
    document.body.removeChild(tempElement);
    """
  ]);
}

Android端实现

通过平台通道写入HTML格式的剪贴板数据：

• Kotlin（Android原生代码）：

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.yourapp/clipboard_rich"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            when (call.method) {
                "copyRichText" -> {
                    val text = call.argument<String>("text") ?: ""
                    val htmlContent = "<span style=\"font-family: 'Baybayin Neue';\">$text</span>"
                    val clipboard = getSystemService(CLIPBOARD_SERVICE) as ClipboardManager
                    val clipData = ClipData.newHtmlText("Baybayin Text", text, htmlContent)
                    clipboard.setPrimaryClip(clipData)
                    result.success(null)
                }
                else -> result.notImplemented()
            }
        }
    }
}

• Dart端调用：

import 'package:flutter/services.dart';

final _richClipboardChannel = MethodChannel('com.yourapp/clipboard_rich');

Future<void> copyRichBaybayinText(String baybayinText) async {
  try {
    await _richClipboardChannel.invokeMethod(
      'copyRichText',
      {'text': baybayinText},
    );
  } on PlatformException catch (e) {
    // 处理复制失败的情况
  }
}

iOS端实现

类似Android，通过平台通道写入RTF或HTML格式的剪贴板数据，核心是创建包含字体样式的NSAttributedString后写入剪贴板。

2. 变通方案（兼容无字体的场景） #

如果无法保证目标应用安装Baybayin Neue字体，可提供两种复制选项：

• 纯文本复制：用原生Clipboard.setData，保证文本可编辑，字体显示由目标应用决定；
• 图片复制：将渲染好的Baybayin文本转为图片（用RepaintBoundary捕获），复制图片保证样式，但文本不可编辑。

示例图片复制代码：

import 'dart:ui' as ui;
import 'dart:convert';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

Future<void> copyBaybayinAsImage(GlobalKey repaintKey) async {
  final boundary = repaintKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
  if (boundary == null) return;

  final image = await boundary.toImage(pixelRatio: 2.0);
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  if (byteData == null) return;

  await Clipboard.setData(ClipboardData(
    text: 'Baybayin Image', // 部分应用需要文本占位
    html: '<img src="data:image/png;base64,${base64Encode(byteData.buffer.asUint8List())}">',
  ));
}

使用时给显示Baybayin文本的Widget添加GlobalKey：

final _repaintKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return RepaintBoundary(
    key: _repaintKey,
    child: Text(
      baybayinText,
      style: TextStyle(fontFamily: 'Baybayin Neue'),
    ),
  );
}

总结 #

• 要保留可编辑性：必须通过富文本复制方案，且依赖目标应用安装Baybayin Neue字体；
• 要保证样式显示：图片复制是最可靠的方式，但牺牲可编辑性；
• 最优实践：同时提供两种复制选项，让用户根据场景选择。

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