Flutter上手之路(八)：搜索功能

2023-11-20 23:53:27

8天让iOS开发者上手Flutter系列，致力于用最简便的方式帮助iOS开发者快速上手Flutter。在上一篇文章中，我们完成了首页聊天页面的导航条和列表展示，今天，我们将一起完成搜索cell的展示和点击之后的搜索页面的功能。

自定义SearchCell

创建search_cell.dart文件

import 'package:flutter/material.dart';

class SearchCell extends StatelessWidget {
  final String title;
  final String subtitle;

  SearchCell({this.title, this.subtitle});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      subtitle: Text(subtitle),
    );
  }
}

在search_cell.dart文件中，我们定义了一个SearchCell类，这是一个无状态的Flutter小部件。它接收两个字符串参数：title和subtitle。小部件的build方法返回一个ListTile，其中包含标题和小标题文本。

SearchCell用法

现在，我们可以使用SearchCell来填充搜索列表。在search_page.dart文件中，将以下代码添加到_buildBody方法中：

ListView.builder(
  itemCount: _searchResults.length,
  itemBuilder: (BuildContext context, int index) {
    return SearchCell(
      title: _searchResults[index].title,
      subtitle: _searchResults[index].subtitle,
    );
  },
);

此代码创建一个ListView，其中包含_searchResults列表中的项目数目。每个项目都显示一个SearchCell，其中包含标题和小标题文本。

搜索功能

现在，我们可以添加搜索功能了。在search_page.dart文件中，将以下代码添加到_buildAppBar方法中：

TextField(
  decoration: InputDecoration(
    hintText: 'Search',
  ),
  onChanged: (value) {
    _search(value);
  },
);

此代码创建一个文本字段，用户可以在其中输入搜索查询。当用户更改文本字段中的文本时，_search()方法将被调用。

在search_page.dart文件中，添加以下方法：

void _search(String value) {
  setState(() {
    _searchResults = _data.where((item) {
      return item.title.toLowerCase().contains(value.toLowerCase());
    }).toList();
  });
}

此方法接收一个字符串参数value，它是用户在文本字段中输入的搜索查询。该方法使用where()方法过滤_data列表，仅选择包含搜索查询的项目。然后，它将过滤后的列表分配给_searchResults变量。

现在，我们已经完成了搜索功能。用户可以输入搜索查询，然后搜索结果将显示在列表中。