复制到剪贴板 - Clipboard.setData() - 在 iOS 浏览器（Safari 和 Chrome）的 Flutter Web 上损坏

Question

Clipboard.setData(ClipboardData(text: textToCopy));

通过桌面浏览器访问时，在 flutter web 上工作正常，但在移动设备（iOS Chrome 和 Safari）上不起作用。

有什么解决办法吗？

除了经典的 flutter 服务之外，我还尝试了其他一些软件包，但它们都有同样的问题。

Answer 1

我也遇到了同样的问题，但从剪贴板读取文本。

Clipboard.getData(Clipboard.kTextPlain)

不适用于 iOS 或 Android 浏览器的 Flutter Web

但是，我找到了一种适合我的使用 javascript 的解决方法。

我将在这里粘贴我的代码

pubspec.yaml - 安装js包

 js: ^0.6.4

index.html - 在这里定义一个函数

function pasteFromClipboard() {
  return window.navigator.clipboard.readText();
}

clipboard_helper.dart

import 'clipboard_helper_stub.dart'
if (dart.library.io) 'clipboard_helper_for_mobile.dart'
if (dart.library.html) 'clipboard_helper_for_web.dart';

class ClipboardHelper {
  final ClipboardHelperImpl _helper;

  ClipboardHelper() : _helper = ClipboardHelperImpl();

  Future<String?> readTextFromClipboard() async {
    return _helper.readTextFromClipboard();
  }
}

abstract class ClipboardHelperBase {
  Future<String?> readTextFromClipboard();
}

clipboard_helper_stub.dart

import 'clipboard_helper.dart';

class ClipboardHelperImpl extends ClipboardHelperBase {
  @override
  Future<String?> readTextFromClipboard() async {
    throw Exception("Stub implementation");
  }
}

clipboard_helper_for_mobile.dart

import 'clipboard_helper.dart';
import 'package:flutter/services.dart';

class ClipboardHelperImpl extends ClipboardHelperBase {
  @override
  Future<String?> readTextFromClipboard() async {
    final clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
    final text = clipboardData?.text;
    return text;
  }
}

clipboard_helper_for_web.dart

import 'package:js/js.dart';
import 'clipboard_helper.dart';
import 'package:js/js_util.dart';

@JS('pasteFromClipboard')
external dynamic pasteFromClipboard();

class ClipboardHelperImpl extends ClipboardHelperBase {
  @override
  Future<String?> readTextFromClipboard() async {
    final String? text = await promiseToFuture(
      pasteFromClipboard(),
    );

    return text;
  }
}

---

结论 - 我希望这可以帮助某人，并希望将来能够修复

Clipboard.getData()

，但我现在正在使用这个解决方法，这似乎有效

请注意，

window.navigator.clipboard

可能未定义，因为它需要安全来源（HTTPS或本地主机）

参考：navigator.clipboard未定义

Answer 2

不确定这是否是一个错误，如果最近没有用户操作，苹果似乎会阻止写入剪贴板。

类似问题：

https://github.com/flutter/flutter/issues/106046

The clipboard-write permission is only granted to the currently active tab.
The request to write to the clipboard must be triggered during a user gesture.
(Maybe) Your site needs to be on https.

所以这可能与苹果浏览器安全相关。

对于我来说，在未来延迟 1 毫秒后复制到剪贴板是可行的

未来延迟 1 秒后不起作用。

Answer 3

这个插件解决了您的问题：

复制到网络剪贴板