Flutter文本高亮插件text_word_highlighter的使用

text_word_highlighter 提供了一个名为 TextWordHighlighter 的小部件，它可以帮助你在一段文字中高亮（使用文本样式属性）一个或多个单词。

特性

1. 在句子中高亮多个单词。
2. 为特定单词提供样式。
3. 基于索引高亮单词。
4. 基于单词高亮单词。

使用方法

获取示例文件夹 /example。

基于索引高亮

// To highlight by index
// Use WordHighlight.byIndex constructor
TextWordHighlighter(
  text: "Hey Flutter Developers. This is a word highlighter package.",
  textStyle: const TextStyle(color: Colors.teal),
  wordHighlightList: [
    WordHighlight.byIndex(
       wordIndex: 2,
       wordStyle: const TextStyle(
         color: Colors.red)
    ),
    WordHighlight.byIndex(
        wordIndex: 5,
        wordStyle: const TextStyle(
        color: Colors.green,
    )),
    WordHighlight.byIndex(
        wordIndex: 6,
        wordStyle: const TextStyle(
        color: Colors.blue,
    )),
    WordHighlight.byIndex(
        wordIndex: 8,
        wordStyle: const TextStyle(
        color: Colors.orange,
    )),
],
),

基于单词高亮

// Highlight by word
// Use WordHighlight.byWord constructor
TextWordHighlighter(
  text: "Hey Flutter Developers. This is a word highlighter package.",
  textStyle: const TextStyle(color: Colors.teal),
  wordHighlightList: [
    WordHighlight.byWord(
        word: "Flutter",
        wordStyle: const TextStyle(
          color: Colors.red,
        )),
    WordHighlight.byWord(
        word: "THIS",
        ignoreCase: true,
        wordStyle: const TextStyle(
          color: Colors.green,
        )),
    WordHighlight.byWord(
        word: "WORD",
        ignoreCase: false,
        wordStyle: const TextStyle(
          color: Colors.green,
        )),
  ],
),

TextWordHighlighter 属性

WordHighlight 类

目前有以下两种方式可以高亮单词：

byIndex

通过索引高亮单词时，需要在 WordHighlight.byIndex 构造函数中提供两个参数：

• wordIndex: 单词的索引。
• wordStyle: 单词的样式。

WordHighlight.byIndex(
    wordIndex: 8, // 单词的索引
    wordStyle: const TextStyle(
    color: Colors.orange,
)),

byWord

通过单词高亮时，需要在 WordHighlight.byWord 构造函数中提供两个参数：

• word: 需要高亮的单词。
• wordStyle: 单词的样式。
• ignoreCase: [可选] 是否区分大小写，默认为 false。

WordHighlight.byWord(
    word: "Flutter",
    wordStyle: const TextStyle(
      color: Colors.red,
    )),

更多功能即将推出

1. 按字符高亮
2. 按范围高亮

完整示例代码

以下是完整的示例代码，展示了如何使用 TextWordHighlighter 来高亮单词。

import 'package:flutter/material.dart';
import 'package:text_word_highlighter/text_word_highlighter.dart';
import 'package:text_word_highlighter/utils/word_highlight.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Word Highlighter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Text Word Highlighter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final title = 'Hey Flutter Developers. This is a word highlighter package.';
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            // When you have the index of the word in the line to be highlighted
            // Use WordHighlight.byIndex constructor
            TextWordHighlighter(
              text: title,
              textStyle: const TextStyle(color: Colors.teal),
              wordHighlightList: [
                WordHighlight.byIndex(
                    wordIndex: 2,
                    wordStyle: const TextStyle(
                      color: Colors.red,
                    )),
                WordHighlight.byIndex(
                    wordIndex: 5,
                    wordStyle: const TextStyle(
                      color: Colors.green,
                    )),
                WordHighlight.byIndex(
                    wordIndex: 6,
                    wordStyle: const TextStyle(
                      color: Colors.blue,
                    )),
                WordHighlight.byIndex(
                    wordIndex: 8,
                    wordStyle: const TextStyle(
                      color: Colors.orange,
                    )),
              ],
            ),

            // Highlight by word
            // Use WordHighlight.byWord constructor
            TextWordHighlighter(
              text: title,
              textStyle: const TextStyle(color: Colors.teal),
              wordHighlightList: [
                WordHighlight.byWord(
                    word: "Flutter",
                    wordStyle: const TextStyle(
                      color: Colors.red,
                    )),
                WordHighlight.byWord(
                    word: "THIS",
                    ignoreCase: true,
                    wordStyle: const TextStyle(
                      color: Colors.green,
                    )),
                WordHighlight.byWord(
                    word: "WORD",
                    ignoreCase: false,
                    wordStyle: const TextStyle(
                      color: Colors.green,
                    )),
              ],
            ),
          ],
        ),
      ),
    );
  }
}