Flutter文本高亮搜索插件flutter_highlight_search_text的使用

Flutter文本高亮搜索插件flutter_highlight_search_text的使用

flutter_highlight_search_text 是一个用于在字符串中高亮搜索文本的 Flutter 包。它提供了一种可定制且高效的强调特定文本部分的方式，适用于搜索功能和文本显示。

特性

• 自定义文本和高亮样式：

  • 轻松为文本的常规部分和高亮部分应用自定义样式。可以设置所需的字体颜色、字体、大小等。

• 不区分大小写的匹配：

  • 该组件能够高亮文本，无论其大小写如何，确保所有搜索查询实例都被正确高亮。

• 高效的文本分割：

  • 优化了在文本中查找查询并进行分割的性能，即使对于大字符串也能保持流畅。

• 灵活的最大行数：

  • 使用 maxLines 参数控制显示的行数，必要时可以使用省略号截断文本。

• 处理边缘情况：

  • 当搜索查询为空或未在文本中找到时，该组件能够优雅地处理这些情况，确保一致的行为。

• 易于集成：

  • 只需将 SearchHighlightText 组件添加到您的应用中，并通过几行代码进行定制。

开始使用

要使用此包，请遵循以下步骤：

1. 添加依赖项： 在 pubspec.yaml 文件中添加 flutter_highlight_search_text：

   dependencies:
     flutter_highlight_search_text: ^x.x.x
   

2. 导入包： 在需要使用的 Dart 文件中导入该包：

   import 'package:flutter_highlight_search_text/flutter_highlight_search_text.dart';
   

使用示例

SearchHighlightText(
  text: 'This is text',
  query: "text",
),

完整示例

以下是一个完整的示例，展示了如何在应用中使用 flutter_highlight_search_text 包来实现电影列表的搜索功能。

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

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

class Film {
  final String name;
  final String description;
  final int year;
  final String director;
  final String genre;

  Film({
    required this.name,
    required this.description,
    required this.year,
    required this.director,
    required this.genre,
  });
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Film List',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        textTheme: TextTheme(
          titleLarge: const TextStyle(fontWeight: FontWeight.bold),
          titleMedium: TextStyle(color: Colors.grey[600]),
        ),
      ),
      home: const FilmListScreen(),
    );
  }
}

class FilmListScreen extends StatefulWidget {
  const FilmListScreen({super.key});

  [@override](/user/override)
  _FilmListScreenState createState() => _FilmListScreenState();
}

class _FilmListScreenState extends State<FilmListScreen> {
  List<Film> films = [
    Film(
      name: 'Inception',
      description: 'A skilled thief who steals corporate secrets through dream-sharing technology is given a chance to erase his criminal history by planting an idea into the mind of a CEO.',
      year: 2010,
      director: 'Christopher Nolan',
      genre: 'Science Fiction',
    ),
    Film(
      name: 'The Shawshank Redemption',
      description: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.',
      year: 1994,
      director: 'Frank Darabont',
      genre: 'Drama',
    ),
    Film(
      name: 'The Godfather',
      description: 'The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.',
      year: 1972,
      director: 'Francis Ford Coppola',
      genre: 'Crime',
    ),
    Film(
      name: 'The Dark Knight',
      description: 'When the menace known as the Joker emerges from his mysterious past, he wreaks havoc and chaos on the people of Gotham.',
      year: 2008,
      director: 'Christopher Nolan',
      genre: 'Action',
    ),
    Film(
      name: 'Pulp Fiction',
      description: 'The lives of two mob hitmen, a boxer, a gangster, and his wife intertwine in four tales of violence and redemption.',
      year: 1994,
      director: 'Quentin Tarantino',
      genre: 'Crime',
    ),
    Film(
      name: 'The Lord of the Rings: The Fellowship of the Ring',
      description: 'A young hobbit, Frodo, is tasked with destroying an all-powerful ring that could bring doom to Middle-earth.',
      year: 2001,
      director: 'Peter Jackson',
      genre: 'Fantasy',
    ),
    Film(
      name: 'The Matrix',
      description: 'A computer hacker learns about the true nature of his reality and his role in the war against its controllers.',
      year: 1999,
      director: 'The Wachowskis',
      genre: 'Science Fiction',
    ),
    Film(
      name: 'Forrest Gump',
      description: 'The story of a man with a low IQ who unintentionally influences some of the biggest events of the 20th century in the USA.',
      year: 1994,
      director: 'Robert Zemeckis',
      genre: 'Drama',
    ),
    Film(
      name: 'Star Wars: Episode IV - A New Hope',
      description: 'Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, and two droids to save the galaxy from the Empire’s world-destroying battle station.',
      year: 1977,
      director: 'George Lucas',
      genre: 'Science Fiction',
    ),
    Film(
      name: 'Fight Club',
      description: 'An insomniac office worker and a soap salesman form an underground fight club that evolves into something much more.',
      year: 1999,
      director: 'David Fincher',
      genre: 'Drama',
    ),
  ];

  List<Film> filteredFilms = [];
  String searchQuery = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    filteredFilms = films;
  }

  void updateSearchQuery(String query) {
    setState(() {
      searchQuery = query;
      filteredFilms = films.where((film) {
        final lowerCaseQuery = searchQuery.toLowerCase();
        return film.name.toLowerCase().contains(lowerCaseQuery) ||
            film.description.toLowerCase().contains(lowerCaseQuery) ||
            film.director.toLowerCase().contains(lowerCaseQuery);
      }).toList();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Film List'),
        centerTitle: true,
        elevation: 4.0,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              onChanged: updateSearchQuery,
              decoration: InputDecoration(
                labelText: 'Search films...',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12.0),
                ),
                prefixIcon: const Icon(Icons.search),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(8.0),
              itemCount: filteredFilms.length,
              itemBuilder: (context, index) {
                Film film = filteredFilms[index];
                return Card(
                  elevation: 3,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: ListTile(
                      contentPadding: EdgeInsets.zero,
                      title: SearchHighlightText(
                        text: film.name,
                        query: searchQuery,
                        textStyle: Theme.of(context).textTheme.titleLarge,
                        highlightTextStyle: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.blue),
                      ),
                      subtitle: Padding(
                        padding: const EdgeInsets.only(top: 4.0),
                        child: SearchHighlightText(
                          text: '${film.description}\n\n${film.director} • ${film.year}',
                          query: searchQuery,
                          textStyle: Theme.of(context).textTheme.titleMedium,
                          highlightTextStyle: Theme.of(context).textTheme.titleMedium?.copyWith(color: Colors.blue),
                          maxLines: 10,
                        ),
                      ),
                      isThreeLine: true,
                      onTap: () {
                        // Implement onTap to navigate to a detail screen or show more info
                      },
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}