Flutter应用从Web Share API粘贴仅得文本，如何获取文本+URL？

问题原因 #

Flutter的TextField默认仅读取剪贴板的纯文本格式数据，而通过Web Share API复制的内容会同时在剪贴板中存储多份数据：

• 纯文本格式：仅包含你指定的TEXT内容
• text/uri-list格式：单独存储https://google.it这个URL
• 部分场景下还会有富文本格式

WhatsApp、Telegram这类应用会自动检测剪贴板中的多格式数据并合并展示，但Flutter默认不会做这个合并操作，所以粘贴后只显示纯文本部分。

解决办法 #

通过自定义粘贴逻辑，手动读取剪贴板中的纯文本和URL数据，合并后再插入到TextField中。

方案1：使用Flutter 3.3+的onPaste回调（推荐）

Flutter 3.3版本开始给TextField新增了onPaste回调，可以直接拦截并处理粘贴行为：

import 'package:flutter/services.dart';

// 先定义TextEditingController
final TextEditingController _controller = TextEditingController();

// 在TextField中使用
TextField(
  controller: _controller,
  onPaste: (String? pastedText) async {
    // 获取剪贴板中的纯文本和URL数据
    final plainTextData = await Clipboard.getData(Clipboard.kTextPlain);
    final urlData = await Clipboard.getData('text/uri-list');

    String finalContent = plainTextData?.text ?? '';
    // 如果URL存在且未包含在纯文本中，就追加URL
    if (urlData?.text != null && !finalContent.contains(urlData!.text!)) {
      finalContent += ' ${urlData.text}';
    }

    // 将合并后的内容插入到TextField的选中位置
    final selection = _controller.selection;
    _controller.text = _controller.text.replaceRange(
      selection.start,
      selection.end,
      finalContent,
    );
    // 调整光标到粘贴内容的末尾
    _controller.selection = TextSelection.collapsed(
      offset: selection.start + finalContent.length,
    );

    // 返回true表示已自定义处理粘贴，不再执行默认行为
    return true;
  },
)

方案2：兼容旧版本Flutter（监听粘贴快捷键）

如果你的Flutter版本低于3.3，可以通过RawKeyboardListener监听Ctrl+V（Windows/Linux）或Cmd+V（Mac）的粘贴快捷键，手动处理粘贴逻辑：

import 'package:flutter/services.dart';

final TextEditingController _controller = TextEditingController();
final FocusNode _focusNode = FocusNode();

// 处理粘贴的方法
Future<void> _handlePaste() async {
  final plainTextData = await Clipboard.getData(Clipboard.kTextPlain);
  final urlData = await Clipboard.getData('text/uri-list');

  String finalContent = plainTextData?.text ?? '';
  if (urlData?.text != null && !finalContent.contains(urlData!.text!)) {
    finalContent += ' ${urlData.text}';
  }

  final selection = _controller.selection;
  _controller.text = _controller.text.replaceRange(
    selection.start,
    selection.end,
    finalContent,
  );
  _controller.selection = TextSelection.collapsed(
    offset: selection.start + finalContent.length,
  );
}

// 构建Widget
RawKeyboardListener(
  focusNode: _focusNode,
  onKey: (RawKeyEvent event) {
    // 监听Ctrl+V或Cmd+V快捷键
    bool isPaste = (event.isControlPressed || event.isMetaPressed) &&
        event.logicalKey == LogicalKeyboardKey.keyV;
    if (isPaste && event is RawKeyDownEvent) {
      _handlePaste();
    }
  },
  child: TextField(
    controller: _controller,
    focusNode: _focusNode,
  ),
)

补充说明 #

如果Web Share API还同时复制了title内容，你也可以通过读取剪贴板的text/html富文本格式来提取标题，再根据需求合并到内容中。

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