Flutter文本搜索插件searchable_text的使用

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

Flutter 文本搜索插件 searchable_text 的使用

Searchable Text Widget

Searchable Text Widget 是一个 Flutter 包，它提供了灵活且可定制的方式来显示带有高亮搜索词的文本。此小部件在需要为用户提供一种友好的方式来强调文本中的特定术语时特别有用。

特性

  • 显示带有高亮搜索词的文本。
  • 自定义高亮和非高亮文本的外观。
  • 定义高亮区域的装饰。
  • 简单地集成到您的 Flutter 应用程序中。

安装

要在您的 Flutter 项目中使用 Searchable Text Widget，请将其添加到 pubspec.yaml 文件中：

dependencies:
  searchable_text: ^0.0.5  # 替换为最新版本

然后运行 flutter pub get 来获取该包。

使用

首先，在 Dart 文件中导入该包：

import 'package:flutter/material.dart';
import 'package:searchable_text/text.dart';

然后，在您的小部件树中使用 SearchableText 小部件：

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 搜索查询变量
    String searchQuery = "";

    // 模拟搜索结果列表
    List<Models> results = [
      Models(name: "Apple"),
      Models(name: "Banana"),
      Models(name: "Cherry"),
      Models(name: "Date"),
      Models(name: "Elderberry")
    ];

    return Scaffold(
      appBar: AppBar(title: const Text('Searchable Text Example')),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          var item = results[index];
          return ListTile(
            title: SearchableText(
              item.name,
              style: TextStyle(
                color: Themes.textColor,
                fontSize: 11.sp,
                fontFamily: 'nexaRegular',
              ),
              searchTerm: searchQuery,  // 高亮搜索词
            ),
          );
        },
        itemCount: results.length,
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用searchable_text插件来实现文本搜索功能的代码示例。这个插件允许你在文本中执行高效的搜索操作，并且可以在搜索结果中高亮显示匹配的关键词。

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

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

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

接下来，你可以在你的Flutter应用中实现文本搜索功能。以下是一个简单的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Searchable Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchableTextPage(),
    );
  }
}

class SearchableTextPage extends StatefulWidget {
  @override
  _SearchableTextPageState createState() => _SearchableTextPageState();
}

class _SearchableTextPageState extends State<SearchableTextPage> {
  final TextEditingController _searchController = TextEditingController();
  final String _textToSearch =
      "Flutter is an open-source UI software development kit created by Google. "
      "It is used to develop applications for Android, iOS, Linux, macOS, Windows, and the web from a single codebase.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Searchable Text Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _searchController,
              decoration: InputDecoration(
                labelText: 'Search',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _searchController.clear();
                    setState(() {});
                  },
                ),
              ),
              onChanged: (value) {
                setState(() {});
              },
            ),
            SizedBox(height: 16),
            Expanded(
              child: _buildSearchableText(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchableText() {
    final searchQuery = _searchController.text.toLowerCase();
    if (searchQuery.isEmpty) {
      return Text(_textToSearch);
    } else {
      return SearchableText.rich(
        text: _textToSearch,
        searchQuery: searchQuery,
        style: TextStyle(fontSize: 18),
        textStyleBuilder: (TextStyle baseStyle, Match match) {
          return match.isMatch
              ? baseStyle.copyWith(color: Colors.red, backgroundColor: Colors.yellow.withOpacity(0.5))
              : baseStyle;
        },
      );
    }
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它包含一个文本输入框和一个用于显示搜索结果的区域。当用户输入搜索查询时，SearchableText.rich小部件会根据查询结果高亮显示匹配的文本。

  • TextEditingController用于管理文本输入框的状态。
  • TextField用于输入搜索查询。
  • SearchableText.rich用于显示搜索结果，并高亮显示匹配的关键词。

你可以根据需要调整这个示例，比如改变高亮显示的样式、处理更复杂的文本数据等。希望这个示例能帮你更好地理解如何在Flutter中使用searchable_text插件来实现文本搜索功能。

回到顶部