Flutter中关于粘贴复制的使用

潜水的鱼儿
2,401 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

摘要：本文主要介绍Flutter中文本的复制和粘贴

记录下开发中对于文本粘贴复制的使用

1. SelectableText

对于一般文本我们可以使用SelectableText类的Widget进行选择操作 image.png

SelectableText( 
'sdsadasdasdasdsadasdasdasda
ssasadasdsadaasdasdasdasdasdasdasdas
dasdasdasdasdasdasdasdasdasdasd'
)

默认的话就是长按会有选择框我们可以选择toolbarOptions,默认是选择copy和selectAll

toolbarOptions = toolbarOptions ??
  const ToolbarOptions(
    selectAll: true,
    copy: true,
  )

我们可以自定义设置,但是paste和cut是无效的，这个行为针对的是textField或者EditableText组件才有效

 SelectableText(
  toolbarOptions:const ToolbarOptions(
    copy: true,
    selectAll: true,
    paste: true,
    cut: true
  ),
  )
  • 设置光标颜色和粗细
SelectableText(
  'sdsadasdasdasdsadasdasdasda
ssasadasdsadaasdasdasdasdasdasdasdas
dasdasdasdasdasdasdasdasdasdasd''

  showCursor: true,//展示光标
  autofocus: true,
  cursorColor: Colors.blue,
  cursorRadius: Radius.circular(4),
  cursorWidth: 8,

)

image.png

附带点击事件

onTap: () => print('object'),
  • 本地化 我们可以发现选择框的语音是英文，我们可以简单的设置下在pubspec中添加依赖
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

之后在MaterialApp添加语音环境我们这里添加默认为中文

locale: const Locale('zh', 'CH'),
localizationsDelegates: const [
  GlobalCupertinoLocalizations.delegate,
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
],
supportedLocales: const [
  Locale('zh', 'CH'),
],

image.png

这个时候系统默认的语言就变为了中文

2. Clipboard

我们有的时候业务有需求会使用剪贴板，系统的粘贴板使用

image.png 比如我们长按的时候自定义菜单中有复制操作，不是系统的拷贝。这个时候可以使用Clipboard

  • 复制
TextMessage textMessage = message.content as TextMessage;
Clipboard.setData(ClipboardData(text: textMessage.content!));
  • 粘贴
void _pastText() async {

  var results = (await Clipboard.getData(Clipboard.kTextPlain)) as String;
  print(results);
  setState(() {});
}

image.png 一般来说复制文本的话使用即可

3. pasteboard

我们有的时候业务有需求会使用剪贴板，这个时候就会使用一些三方的库，其实也就是类似备忘录模式，保存这个复制的状态和内容。粘贴的时候在其他部分进行操作。这里使用的是 pasteboard 当然也有其他的库可以使用。 中间可能会复制一些文件地址等 导入

  • 文本复制
 Pasteboard.writeText(textMessage.content!);
  • 文本粘贴
void _pastText() async {
  String results = await Pasteboard.text ?? '';
   textEditingController.text = textEditingController.text + results;
  setState(() {});
}

当然我们可以使用文件图片

import 'package:pasteboard/pasteboard.dart';

Future<void> readAndWriteFiles() async {
  final paths = ['your_file_path'];
  await Pasteboard.writeFiles(paths);

  final files = await Pasteboard.files();
  print(files);
}

Future<void> readImages() async {
  final imageBytes = await Pasteboard.image;
  print(imageBytes?.length);
}

4. 小结

对于展示类的文本我们使用系统自带的widget即可SelectableText，相比Text多了选择的功能和点击事件。对于自定义的一些粘贴复制我们使用系统的Clipboard类，主要是文本信息的复制。对于一些文件或者图片复制我们需要使用一些三方给我们封装好的，可以根据实际情况进行选择。

avatar
文章
阅读
粉丝