Flutter文本高亮插件flutter_highlighted_text的使用

Flutter文本高亮插件flutter_highlighted_text的使用

HighlightedText 是一个 Flutter 小部件，它提供了一种在文本中查找和高亮特定文本模式的方法。它还支持对高亮部分的点击交互。

关键特性

  • 查找与高亮：可以轻松地在一个文本内容中高亮多个文本模式。
  • 自定义样式：可以为高亮的部分应用自己的文本样式以获得独特的外观。
  • 点击交互：可以定义当用户点击高亮文本时发生的动作（例如，显示弹出窗口或导航到新视图）。
  • 灵活匹配：
    • 大小写敏感或不敏感匹配
    • 支持 Unicode
    • 单行或多行匹配
    • 使用 dotAll 进行更广泛的正则表达式匹配

安装

在项目的 pubspec.yaml 文件中添加 highlighted_text 包：

dependencies:
  highlighted_text: ^当前版本

运行 `flutter pub get` 来安装该包。

使用方法

导入包并使用 HighlightedText 小部件：

import 'package:highlighted_text/highlighted_text.dart';

HighlightedText(
  "This is a sample text with keywords to highlight",
  patterns: ["sample", "highlight"],
  highLightStyle: const TextStyle(
    color: Colors.orange,
    fontWeight: FontWeight.bold,
  ),
  onTap: (pattern) {
    print("Tapped on: $pattern");
  },
),

自定义

  • highLightStyle: 控制高亮文本的样式（颜色、背景、字体等）。
  • onTap: 定义当用户点击高亮文本时执行的回调函数。
  • caseSensitive, unicode, multiple, dotAll: 配置正则表达式匹配行为。

示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: HighlightedText(
            "Find multiple words or phrases. This is case-sensitive.",
            patterns: ["Find", "case-sensitive"],
            highLightStyle: const TextStyle(
              color: Colors.red, 
              backgroundColor: Colors.yellow,
            ),
            caseSensitive: true,
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_highlighted_text 是一个用于在 Flutter 应用中高亮显示文本的插件。它可以用于在文本中高亮显示特定的关键词、短语或正则表达式匹配的内容。以下是如何使用 flutter_highlighted_text 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_highlighted_text 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_highlighted_text: ^1.0.0  # 请查看最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_highlighted_text 包：

import 'package:flutter_highlighted_text/flutter_highlighted_text.dart';

3. 使用 HighlightedText 组件

HighlightedText 组件允许你指定要显示的文本以及要高亮的部分。你可以通过 highlightedWords 参数来指定要高亮的单词或短语。

以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Highlighted Text Example'),
        ),
        body: Center(
          child: HighlightedText(
            text: 'This is a sample text to highlight some words.',
            highlightedWords: ['sample', 'highlight'],
            highlightStyle: TextStyle(
              backgroundColor: Colors.yellow,
              fontWeight: FontWeight.bold,
            ),
            textStyle: TextStyle(
              fontSize: 16.0,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}

4. 参数说明

  • text: 要显示的文本。
  • highlightedWords: 要高亮的单词或短语列表。
  • highlightStyle: 高亮文本的样式（如背景颜色、字体粗细等）。
  • textStyle: 普通文本的样式。

5. 正则表达式高亮

你也可以使用正则表达式来高亮文本。通过 highlightRegex 参数可以指定正则表达式：

HighlightedText(
  text: 'This is a sample text to highlight some words.',
  highlightRegex: RegExp(r'\b\w{5}\b'), // 高亮所有长度为5的单词
  highlightStyle: TextStyle(
    backgroundColor: Colors.yellow,
    fontWeight: FontWeight.bold,
  ),
  textStyle: TextStyle(
    fontSize: 16.0,
    color: Colors.black,
  ),
)

6. 自定义高亮逻辑

你还可以通过 highlightBuilder 参数自定义高亮逻辑，完全控制高亮部分的显示方式：

HighlightedText(
  text: 'This is a sample text to highlight some words.',
  highlightedWords: ['sample', 'highlight'],
  highlightBuilder: (String text, int index) {
    return TextSpan(
      text: text,
      style: TextStyle(
        backgroundColor: index % 2 == 0 ? Colors.yellow : Colors.blue,
        fontWeight: FontWeight.bold,
      ),
    );
  },
  textStyle: TextStyle(
    fontSize: 16.0,
    color: Colors.black,
  ),
)
回到顶部