在Flutter中设计一个简单而又实用的列表搜索栏

2023-11-11 15:33:10

使用Flutter创建响应式列表搜索栏

简介

在现代应用程序中，搜索功能至关重要，它使用户能够快速有效地找到所需信息。Flutter提供了一系列工具，可以轻松创建强大的搜索体验。在这篇文章中，我们将介绍如何使用RxDart和Cupertino库创建响应式列表搜索栏。

实现步骤

导入必要的库

首先，需要导入必要的库，包括Flutter本身、RxDart和Cupertino库：

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

创建可搜索列表

我们将使用RxDart创建可搜索列表，它允许我们响应搜索查询的实时更改。首先，创建一个BehaviorSubject对象来保存搜索结果：

final BehaviorSubject<List<String>> _searchResults = BehaviorSubject();

然后，定义一个过滤方法来过滤列表中的项目：

List<String> _filterSearchResults(String query) {
  return _originalList.where((item) => item.toLowerCase().contains(query.toLowerCase())).toList();
}

创建搜索栏

接下来，使用Cupertino库创建搜索栏，它将处理用户的搜索查询：

CupertinoTextField(
  prefix: Icon(CupertinoIcons.search),
  placeholder: 'Search',
  onChanged: (value) {
    _searchResults.add(_filterSearchResults(value));
  },
)

显示搜索结果

最后，使用StreamBuilder显示搜索结果，它会订阅搜索结果流并实时更新列表：

StreamBuilder<List<String>>(
  stream: _searchResults.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data[index]),
          );
        },
      );
    } else {
      return Center(
        child: CircularProgressIndicator(),
      );
    }
  },
)

完整代码示例

以下是完整的代码示例：

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

class ListSearchBar extends StatefulWidget {
  @override
  _ListSearchBarState createState() => _ListSearchBarState();
}

class _ListSearchBarState extends State<ListSearchBar> {
  final BehaviorSubject<List<String>> _searchResults = BehaviorSubject();
  final List<String> _originalList = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: CupertinoTextField(
          prefix: Icon(CupertinoIcons.search),
          placeholder: 'Search',
          onChanged: (value) {
            _searchResults.add(_filterSearchResults(value));
          },
        ),
      ),
      body: StreamBuilder<List<String>>(
        stream: _searchResults.stream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data[index]),
                );
              },
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }

  List<String> _filterSearchResults(String query) {
    return _originalList.where((item) => item.toLowerCase().contains(query.toLowerCase())).toList();
  }
}