這篇文章是關于在 Flutter 中制作過濾/搜索 ListView。我們將快速瀏覽完成工作的方法，然后通過一個具體而完整的示例來應用該方法。不需要第三方軟件包。

概述

我們將創建一個函數來過濾結果，當文本字段更改 (onChanged) 時將調用此函數。搜索算法可能因情況而異，但最簡單和最流行的是使用以下方法：

• where()：返回一個新的惰性 Iterable，其中包含滿足一個或多個條件的所有元素。
• contains()：用于確定一個字符串是否包含另一個字符串（您可以嘗試其他字符串方法，如startsWith()、**endsWith()**等）。
• toLowerCase()：這個字符串方法會將這個字符串中的所有字符轉換為小寫，這樣搜索關鍵字是大寫還是小寫都沒有關系。

這些詞可能會令人困惑。請參閱示例以獲得更清晰的信息。

例子

假設我們有一個用戶列表，其中包含一些信息，包括 ID、姓名和年齡。一開始，所有這些用戶都顯示在一個 ListView 中。如果您在搜索字段中鍵入內容，則只會顯示名稱與關鍵字匹配的用戶。如果您清除搜索字段，將再次顯示完整的用戶列表。

預覽

編碼

lib/main.dart 中的完整源代碼以及注釋中的解釋：

// main.dart import 'package:flutter/material.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(// Remove the debug bannerdebugShowCheckedModeBanner: false,title: 'Kindacode.com',home: HomePage(),);} }class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState(); }class _HomePageState extends State<HomePage> {// This holds a list of fiction users// You can use data fetched from a database or cloud as wellfinal List<Map<String, dynamic>> _allUsers = [{"id": 1, "name": "Andy", "age": 29},{"id": 2, "name": "Aragon", "age": 40},{"id": 3, "name": "Bob", "age": 5},{"id": 4, "name": "Barbara", "age": 35},{"id": 5, "name": "Candy", "age": 21},{"id": 6, "name": "Colin", "age": 55},{"id": 7, "name": "Audra", "age": 30},{"id": 8, "name": "Banana", "age": 14},{"id": 9, "name": "Caversky", "age": 100},{"id": 10, "name": "Becky", "age": 32},];// This list holds the data for the list viewList<Map<String, dynamic>> _foundUsers = [];@overrideinitState() {// at the beginning, all users are shown_foundUsers = _allUsers;super.initState();}// This function is called whenever the text field changesvoid _runFilter(String enteredKeyword) {List<Map<String, dynamic>> results = [];if (enteredKeyword.isEmpty) {// if the search field is empty or only contains white-space, we'll display all usersresults = _allUsers;} else {results = _allUsers.where((user) =>user["name"].toLowerCase().contains(enteredKeyword.toLowerCase())).toList();// we use the toLowerCase() method to make it case-insensitive}// Refresh the UIsetState(() {_foundUsers = results;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Kindacode.com'),),body: Padding(padding: const EdgeInsets.all(10),child: Column(children: [SizedBox(height: 20,),TextField(onChanged: (value) => _runFilter(value),decoration: InputDecoration(labelText: 'Search', suffixIcon: Icon(Icons.search)),),SizedBox(height: 20,),Expanded(child: _foundUsers.length > 0? ListView.builder(itemCount: _foundUsers.length,itemBuilder: (context, index) => Card(key: ValueKey(_foundUsers[index]["id"]),color: Colors.amberAccent,elevation: 4,margin: EdgeInsets.symmetric(vertical: 10),child: ListTile(leading: Text(_foundUsers[index]["id"].toString(),style: TextStyle(fontSize: 24),),title: Text(_foundUsers[index]['name']),subtitle: Text('${_foundUsers[index]["age"].toString()} years old'),),),): Text('No results found',style: TextStyle(fontSize: 24),),),],),),);} }

實際上，在這種情況下我們不需要TextEditingController。

結論

您已經學習了如何在 Flutter 中創建過濾器/搜索 ListView。

總結

以上是生活随笔為你收集整理的如何在Flutter（2021）中创建过滤器搜索列表视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。