Flutter文本选择插件selectable的使用
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),
),
),
],
),
),
),
),
);
}
}
关键点解释
-
包装滚动视图中的文本:如果使用了滚动视图(如
SingleChildScrollView
、ListView
等),请确保Selectable
是这些滚动视图的子级,并且是文本小部件的父级。 -
启用双击选择:通过设置
selectWordOnDoubleTap: true
,可以让用户双击单词来选择文本。 -
忽略某些小部件:对于不需要启用选择功能的小部件,可以使用
IgnoreSelectable
将其包裹起来。 -
自定义选择菜单:可以通过
popupMenuItems
参数来自定义选择后的弹出菜单项。例如,除了默认的复制选项外,还可以添加自定义的操作项。
添加问题或反馈
如果您在使用selectable
插件时遇到任何问题或有疑问,欢迎在GitHub上提交Issue:https://github.com/ronjb/selectable/issues
希望以上内容对您有所帮助!如果有更多问题,请随时提问。
更多关于Flutter文本选择插件selectable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于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)}');
},
),
],
),
),
);
}
}
解释
-
导入必要的库:
import 'package:flutter/material.dart';
-
定义应用入口:
void main() { runApp(MyApp()); }
-
创建MyApp类:
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Selectable Text Example', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } }
-
创建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
回调来监听文本选择的变化。