Flutter文本子串高亮显示插件substring_highlight的使用

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

Flutter文本子串高亮显示插件substring_highlight的使用

插件简介

substring_highlight 是一个用于在Flutter中实现字符级别高亮显示文本的插件。它特别适用于不区分大小写的搜索词高亮，可以在较长的字符串中多次高亮显示单个搜索词子串。

与现有的Flutter包 highlight_text 不同，后者支持单词匹配（例如 ‘Peter’），而 substring_highlight 提供更细粒度的逐字符匹配（例如，在 ‘Peter’ 中的 ‘t’）。

限制条件

  • 高亮文本不可点击
  • 无法解决如饥饿和气候变化等复杂世界问题（这是指该插件的功能有限性，并非其实际应用范围）

被搜索用于高亮显示的子串不需要匹配较长字符串的开头（可以出现在任何位置）。即使是空格字符也会匹配，但显然不会被高亮显示。

重要提示： 祖先组件必须设置 textDirection（由内部的 RichText 小部件要求），这可以通过 MaterialApp 组件或显式地用 Directionality 组件包裹来实现。

Directionality(
    child: SubstringHighlight(text: 'Peter', term: 't'),
    textDirection: TextDirection.ltr)

示例代码

下面提供了一个完整的示例demo，展示了如何使用 substring_highlight 插件创建一个简单的Flutter应用程序，该程序会根据用户输入的搜索词对文本进行高亮显示。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Substring Highlight Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextField(
                  onChanged: (value) {
                    // This would normally be used to update the state with the new search term.
                    // For simplicity, we're not implementing a stateful widget here.
                  },
                  decoration: InputDecoration(
                    labelText: 'Enter search term',
                  ),
                ),
                SizedBox(height: 20),
                Expanded(
                  child: SubstringHighlight(
                    text: "We shall go on to the end. We shall fight in France and on the seas and oceans.",
                    term: "shall", // Replace this with the actual search term from the TextField.
                    caseSensitive: false,
                    maxLines: 4,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.left,
                    textStyle: TextStyle(color: Colors.grey), // Non-highlighted text style
                    textStyleHighlight: TextStyle(
                      color: Colors.red, // Highlighted text color
                      fontWeight: FontWeight.bold,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

说明

  • TextField：用于接收用户的搜索词。
  • SubstringHighlight：用于展示带有高亮效果的文本。请注意，这里的 term 参数应该动态地从 TextField 获取值，但在上面的例子中为了简化没有实现状态管理逻辑。在实际应用中，您需要使用 StatefulWidget 或者其他状态管理方案来更新 term 的值。

此代码片段创建了一个基本的应用界面，其中包含一个文本框用于输入搜索词，以及一个使用 substring_highlight 插件高亮显示特定子串的文本区域。您可以根据自己的需求调整和扩展这个例子。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用substring_highlight插件来实现文本子串高亮显示的代码案例。

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

dependencies:
  flutter:
    sdk: flutter
  substring_highlight: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中使用SubstringHighlight组件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Substring Highlight Example'),
        ),
        body: Center(
          child: HighlightTextExample(),
        ),
      ),
    );
  }
}

class HighlightTextExample extends StatelessWidget {
  final String text = "Flutter is an open-source UI software development kit created by Google.";
  final List<String> searchTerms = ['Flutter', 'open-source', 'Google'];

  @override
  Widget build(BuildContext context) {
    return SubstringHighlight(
      text: text,
      terms: searchTerms,
      textStyle: TextStyle(fontSize: 20),
      highlightStyle: TextStyle(color: Colors.red, backgroundColor: Colors.yellow, fontSize: 20),
      caseSensitive: false, // 根据需要设置是否区分大小写
      separator: StyledText(' '), // 设置分隔符的样式，这里使用空格作为分隔符，并设置其样式
    );
  }
}

在这个示例中：

  1. text 是你想要显示的原始文本。
  2. searchTerms 是你想要高亮显示的子串列表。
  3. textStyle 是原始文本的样式。
  4. highlightStyle 是高亮显示文本的样式。
  5. caseSensitive 决定了搜索是否区分大小写。
  6. separator 允许你自定义分隔符的样式，这里简单地使用了空格作为分隔符，并为其设置了一个样式（尽管在这个例子中样式为空，但你可以根据需要设置）。

这个示例展示了如何使用substring_highlight插件在Flutter应用中实现文本子串的高亮显示。你可以根据需要调整样式和搜索项。

回到顶部