Flutter文本选择插件word_selectable_text的使用

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

Flutter文本选择插件word_selectable_text的使用

这是一个支持单词高亮和选择的文本小部件。它提供了一个onWordTapped函数，可以让你访问用户选择的单词。

高亮单词

你可以使用highlightColor参数以任何颜色高亮显示单词。

语言支持

该小部件使用字母集的正则表达式来选择单词。对于英语，使用的正则表达式为[a-zA-Z]。

示例

[@override](/user/override)
Widget build(BuildContext context) {
    String textToShow = 
    "Dermatology 是皮肤学的分支。它是一个具有医学和外科方面的专业。皮肤科医生是一位管理与皮肤、头发和指甲相关的疾病以及一些美容问题的专科医生。";
    
    return Scaffold(
        appBar: AppBar(title: Text("小部件测试")),
        body: Container(
            padding: EdgeInsets.all(40),
            width: double.infinity,
            child: WordSelectableText(
                selectable: true,
                highlight: true,
                text: textToShow,
                onWordTapped: (word, index) {
                    // 处理点击事件
                    print('点击了单词: $word');
                },
                style: TextStyle(fontSize: 20)
            )
        ),
    );
}

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

1 回复

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


当然，下面是一个关于如何使用 word_selectable_text 插件的 Flutter 代码示例。word_selectable_text 插件允许你对文本进行单词级的选择，这在一些需要精细文本操作的应用中非常有用。

首先，确保你已经在 pubspec.yaml 文件中添加了 word_selectable_text 依赖：

dependencies:
  flutter:
    sdk: flutter
  word_selectable_text: ^x.y.z  # 替换为最新版本号

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

接下来，是一个使用 word_selectable_text 的简单示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Word Selectable Text Example'),
        ),
        body: Center(
          child: WordSelectableText(
            '这是一个可以单词选择的文本示例。你可以长按并拖动来选择单词。',
            style: TextStyle(fontSize: 20),
            toolbarOptions: const ToolbarOptions(
              copy: true,
              selectAll: true,
              cut: true,
              paste: true,
            ),
            onSelectionChanged: (TextSelection selection) {
              print('当前选择: $selection');
            },
          ),
        ),
      ),
    );
  }
}

代码解释：

  1. 导入包：首先导入 flutter/material.dart 和 word_selectable_text/word_selectable_text.dart。

  2. 主函数：定义 MyApp 作为应用的主入口。

  3. MaterialApp：创建一个 Material 应用。

  4. Scaffold：定义一个 Scaffold，包含 AppBar 和一个居中的文本。

  5. WordSelectableText：

    • 文本内容：传递要显示的文本。
    • 样式：使用 TextStyle 定义文本的样式，这里设置了字体大小为 20。
    • toolbarOptions：定义工具栏选项，这里启用了复制、全选、剪切和粘贴功能。
    • onSelectionChanged：当用户选择文本时，会调用此回调。这里简单地打印当前的选择。

运行这个应用，你将看到一个可以单词选择的文本。你可以长按文本并拖动光标来选择单词，同时顶部会显示一个工具栏，提供复制、剪切、粘贴和全选功能。

希望这个示例能帮助你理解如何使用 word_selectable_text 插件！

回到顶部