Flutter文本粘贴功能插件ui_paste_component的使用

ui_paste_component

这是一个新的Flutter项目。

开始使用

这个项目是一个插件包的起点，该插件包包含针对Android和/或iOS的平台特定实现代码。

对于Flutter开发的帮助，可以查看在线文档，其中提供了教程、示例、移动开发指南以及完整的API引用。

示例代码

以下是main.dart文件中的完整示例代码：

import 'package:ui_paste_component/ui_paste_component.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:io';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _textEditingController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 获取系统版本
  static int? getSystemVersion() {
    final intInStr = RegExp(r'\d+');
    final numbers = intInStr.allMatches(Platform.operatingSystemVersion).map((m) => m.group(0));
    return int.tryParse(numbers.firstOrNull ?? '');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final systemVersion = getSystemVersion() ?? 13;
    return MaterialApp(
      locale: const Locale("ru"),
      builder: (context, child) {
        final mediaQueryData = MediaQuery.of(context);
        final num constrainedTextScaleFactor = mediaQueryData.textScaleFactor.clamp(1.0, 1.25);
        return MediaQuery(
          data: mediaQueryData.copyWith(
            textScaleFactor: constrainedTextScaleFactor as double?,
          ),
          child: child ?? const SizedBox.shrink(),
        );
      },
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            textAlign: TextAlign.center,
            controller: _textEditingController,
            contextMenuBuilder: (context, editableTextState) {
              var children = <Widget>[];
              for (var item in editableTextState.contextMenuButtonItems) {
                if (item.type == ContextMenuButtonType.paste && (Platform.isIOS && systemVersion >= 16)) {
                  final pasteItem = item;
                  children.add(
                    Stack(
                      children: [
                        Positioned.fill(
                          child: UIPastComponent(
                            onPasted: (pasted) {
                              _textEditingController.selection.textInside(pasted);
                              pasteItem.onPressed?.call();
                            },
                          ),
                        ),
                        const Visibility(
                          visible: false,
                          maintainSize: true,
                          maintainState: true,
                          maintainAnimation: true,
                          child: CupertinoTextSelectionToolbarButton.text(text: "粘贴"),
                        ),
                      ],
                    ),
                  );
                } else {
                  children.add(
                    CupertinoTextSelectionToolbarButton.buttonItem(
                      buttonItem: item,
                    ),
                  );
                }
              }
              return AdaptiveTextSelectionToolbar(
                anchors: editableTextState.contextMenuAnchors,
                children: children,
              );
            },
          ),
        ),
      ),
    );
  }

  // 工具栏按钮样式
  TextStyle _kToolbarButtonFontStyle = TextStyle(
    inherit: false,
    fontSize: 15.0,
    letterSpacing: -0.15,
    fontWeight: FontWeight.w400,
  );
}

代码解释

导入库：

import 'package:ui_paste_component/ui_paste_component.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:io';

主函数：

void main() {
  runApp(const MyApp());
}

定义MyApp类：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

初始化状态：

class _MyAppState extends State<MyApp> {
  final TextEditingController _textEditingController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

获取系统版本：

static int? getSystemVersion() {
  final intInStr = RegExp(r'\d+');
  final numbers = intInStr.allMatches(Platform.operatingSystemVersion).map((m) => m.group(0));
  return int.tryParse(numbers.firstOrNull ?? '');
}

构建UI：

[@override](/user/override)
Widget build(BuildContext context) {
  final systemVersion = getSystemVersion() ?? 13;
  return MaterialApp(
    locale: const Locale("ru"),
    builder: (context, child) {
      final mediaQueryData = MediaQuery.of(context);
      final num constrainedTextScaleFactor = mediaQueryData.textScaleFactor.clamp(1.0, 1.25);
      return MediaQuery(
        data: mediaQueryData.copyWith(
          textScaleFactor: constrainedTextScaleFactor as double?,
        ),
        child: child ?? const SizedBox.shrink(),
      );
    },
    home: Scaffold(
      appBar: AppBar(
        title: const Text('插件示例应用'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          textAlign: TextAlign.center,
          controller: _textEditingController,
          contextMenuBuilder: (context, editableTextState) {
            var children = <Widget>[];
            for (var item in editableTextState.contextMenuButtonItems) {
              if (item.type == ContextMenuButtonType.paste && (Platform.isIOS && systemVersion >= 16)) {
                final pasteItem = item;
                children.add(
                  Stack(
                    children: [
                      Positioned.fill(
                        child: UIPastComponent(
                          onPasted: (pasted) {
                            _textEditingController.selection.textInside(pasted);
                            pasteItem.onPressed?.call();
                          },
                        ),
                      ),
                      const Visibility(
                        visible: false,
                        maintainSize: true,
                        maintainState: true,
                        maintainAnimation: true,
                        child: CupertinoTextSelectionToolbarButton.text(text: "粘贴"),
                      ),
                    ],
                  ),
                );
              } else {
                children.add(
                  CupertinoTextSelectionToolbarButton.buttonItem(
                    buttonItem: item,
                  ),
                );
              }
            }
            return AdaptiveTextSelectionToolbar(
              anchors: editableTextState.contextMenuAnchors,
              children: children,
            );
          },
        ),
      ),
    ),
  );
}

工具栏按钮样式：

TextStyle _kToolbarButtonFontStyle = TextStyle(
  inherit: false,
  fontSize: 15.0,
  letterSpacing: -0.15,
  fontWeight: FontWeight.w400,
);

更多关于Flutter文本粘贴功能插件ui_paste_component的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

更多关于Flutter文本粘贴功能插件ui_paste_component的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ui_paste_component 是一个 Flutter 插件，用于处理文本粘贴功能。它可以帮助你在 Flutter 应用中轻松地实现文本粘贴功能。以下是如何使用 ui_paste_component 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 ui_paste_component 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  ui_paste_component: ^1.0.0 # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 ui_paste_component 插件。

import 'package:ui_paste_component/ui_paste_component.dart';

3. 使用插件

你可以在需要的地方使用 UIPasteComponent 来处理文本粘贴功能。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:ui_paste_component/ui_paste_component.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PasteExample(),
    );
  }
}

class PasteExample extends StatefulWidget {
  [@override](/user/override)
  _PasteExampleState createState() => _PasteExampleState();
}

class _PasteExampleState extends State<PasteExample> {
  String _pastedText = '';

  Future<void> _pasteText() async {
    String? text = await UIPasteComponent.paste();
    setState(() {
      _pastedText = text ?? 'No text pasted';
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Paste Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pasteText,
              child: Text('Paste Text'),
            ),
            SizedBox(height: 20),
            Text('Pasted Text: $_pastedText'),
          ],
        ),
      ),
    );
  }
}