Flutter文本选择插件selectable的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter文本选择插件selectable的使用

简介

selectable 是一个Flutter插件,它允许在其包含的所有文本小部件上启用文本选择功能。你可以通过长按单词来选择文本,并通过选择手柄调整选择范围。此外,该插件还支持双击选择单词、忽略特定的小部件以及自定义弹出的选择菜单等功能。

尝试一下:https://ronjb.github.io/selectable

⭐️ 重要提示 ⭐️

本库是在Flutter官方SelectableRegion类及其相关类添加之前编写的。虽然我会继续维护这个库,因为我在一些项目中仍在使用它,但如果官方实现能够满足您的需求,我建议使用Flutter自带的选择功能。

开始使用

要开始使用selectable,首先需要在项目的pubspec.yaml文件中添加依赖:

dependencies:
  selectable: ^0.3.1

然后,在Dart文件中导入包:

import 'package:selectable/selectable.dart';

使用示例

下面是一个完整的示例代码,演示了如何使用selectable插件创建一个简单的可选择文本的应用程序:

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selectable Example',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _selectionController = SelectableController();

  @override
  void dispose() {
    _selectionController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selectable Example'),
      ),
      body: SingleChildScrollView(
        child: Selectable(
          selectWordOnDoubleTap: true,
          selectionController: _selectionController,
          popupMenuItems: [
            const SelectableMenuItem(type: SelectableMenuItemType.copy),
            SelectableMenuItem(
              title: 'Foo! :)',
              isEnabled: (controller) => controller!.isTextSelected,
              handler: (controller) {
                showDialog<void>(
                  context: context,
                  barrierDismissible: true,
                  builder: (builder) {
                    return AlertDialog(
                      contentPadding: EdgeInsets.zero,
                      content: Container(
                        padding: const EdgeInsets.all(16),
                        child: Text(controller!.getSelection()!.text!),
                      ),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8)),
                    );
                  },
                );
                return true;
              },
            ),
          ],
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                Text(
                  '这是一个可以被选择的文本段落。你可以长按或双击单词来选择文本,并使用选择手柄调整选择范围。',
                  style: TextStyle(fontSize: 18),
                ),
                SizedBox(height: 20),
                IgnoreSelectable(
                  child: Text(
                    '这段文本是不可选择的,因为它被包裹在IgnoreSelectable widget中。',
                    style: TextStyle(fontSize: 18, color: Colors.grey),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键点解释

  • 包装滚动视图中的文本:如果使用了滚动视图(如SingleChildScrollViewListView等),请确保Selectable是这些滚动视图的子级,并且是文本小部件的父级。

  • 启用双击选择:通过设置selectWordOnDoubleTap: true,可以让用户双击单词来选择文本。

  • 忽略某些小部件:对于不需要启用选择功能的小部件,可以使用IgnoreSelectable将其包裹起来。

  • 自定义选择菜单:可以通过popupMenuItems参数来自定义选择后的弹出菜单项。例如,除了默认的复制选项外,还可以添加自定义的操作项。

添加问题或反馈

如果您在使用selectable插件时遇到任何问题或有疑问,欢迎在GitHub上提交Issue:https://github.com/ronjb/selectable/issues

希望以上内容对您有所帮助!如果有更多问题,请随时提问。


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

1 回复

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


当然,以下是一个关于如何在Flutter中使用selectable插件来实现文本选择的代码案例。selectable是Flutter中的一个Widget,它允许用户选择文本并进行复制、粘贴等操作。虽然selectable并不是一个单独的插件,但它是Flutter Material库中内置的一个功能。

首先,确保你的Flutter项目已经设置好,并且已经导入了必要的Material库。然后,你可以按照以下步骤使用SelectableText来实现文本选择功能。

代码案例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selectable Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String longText = """
  Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase. Flutter's primary programming language is Dart.
  
  Flutter is designed to be as expressive and flexible as possible, and it offers a rich set of UI widgets that can be easily customized and reused. With Flutter, you can build natively compiled applications for mobile, web, and desktop from a single codebase.
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selectable Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'This is a normal text that is not selectable.',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            SelectableText(
              longText,
              style: TextStyle(fontSize: 18),
              toolbarOptions: ToolbarOptions(
                copy: true,
                selectAll: true,
                cut: true,
                paste: true,
                // You can customize the actions shown in the toolbar
              ),
              onSelectedTextChange: (TextSelection selection) {
                // This callback is triggered when the selected text changes
                print('Selected text: ${selection.textInside(longText)}');
              },
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 导入必要的库

    import 'package:flutter/material.dart';
    
  2. 定义应用入口

    void main() {
      runApp(MyApp());
    }
    
  3. 创建MyApp类

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Selectable Text Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      }
    }
    
  4. 创建MyHomePage类

    • 定义一个长文本字符串。
    • 使用Scaffold来构建页面结构。
    • 使用Column来排列普通文本和可选择文本。
    • 使用SelectableText来创建可选择文本,并设置工具栏选项和选择文本改变时的回调。
class MyHomePage extends StatelessWidget {
  final String longText = """
  Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase. Flutter's primary programming language is Dart.
  
  Flutter is designed to be as expressive and flexible as possible, and it offers a rich set of UI widgets that can be easily customized and reused. With Flutter, you can build natively compiled applications for mobile, web, and desktop from a single codebase.
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selectable Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'This is a normal text that is not selectable.',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            SelectableText(
              longText,
              style: TextStyle(fontSize: 18),
              toolbarOptions: ToolbarOptions(
                copy: true,
                selectAll: true,
                cut: true,
                paste: true,
              ),
              onSelectedTextChange: (TextSelection selection) {
                print('Selected text: ${selection.textInside(longText)}');
              },
            ),
          ],
        ),
      ),
    );
  }
}

这样,你就可以在Flutter应用中实现文本选择功能了。用户可以选择文本,进行复制、粘贴等操作,并且你可以通过onSelectedTextChange回调来监听文本选择的变化。

回到顶部