如标题中所述，我有一个要过滤的Listview。我查找了无尽的示例和代码片段，但是仍然无法找到
list = list.where((u)=>(u.name.toLowerCase().contains(_searchText.toLowerCase())
.toList()));
来过滤列表。
我认为我必须在构建列表的方式上进行一些更改。
Textfield已经可以正常工作，_searchText始终是Textfield所说的。
我的代码：
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_ac/collectible/collectible_details.dart';
import 'package:flutter_ac/nooklets/nook_scaffold.dart';
import 'package:flutter_ac/nooklets/nook_search.dart';
import 'package:flutter_ac/nooklets/nook_sheet.dart';
import 'package:flutter_ac/settings.dart';
import 'package:provider/provider.dart';
import 'collectible.dart';
final TextEditingController _filter = new TextEditingController();
class CollectibleList<C extends Collectible> extends StatefulWidget {
final List<C> collectibles;
final String title;
CollectibleList(
this.collectibles,
{
this.title,
}
);
@override
State<StatefulWidget> createState() => _CollectibleList<C>();
}
class _CollectibleList<C extends Collectible> extends State<CollectibleList<C>> {
Widget _appBarTitle;
bool _isSearching;
String _searchText = "";
List _collectibles = new List();
List _filteredCollectibles = new List();
Icon _searchIcon = new Icon(Icons.search);
final key = new GlobalKey<ScaffoldState>();
var list;
_CollectibleList(){
_filter.addListener(() {
if (_filter.text.isEmpty) {
setState(() {
_searchText = "";
_isSearching = false;
list = list.where((u)=>(u.name.toLowerCase().contains(_searchText.toLowerCase())
.toList()));
});
} else {
setState(() {
_searchText = _filter.text;
log(_searchText);
});
}
});
}
void _openDetails(Collectible collectible) {
var locale = Localizations.localeOf(context);
log("Opening collectible details for ${collectible.name(locale)}");
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CollectibleDetails(collectible)),
);
}
@protected
@override
void initState() {
_appBarTitle = new Text(widget.title ?? "");
super.initState();
_isSearching = false;
}
@override
Widget build(BuildContext context) {
var locale = Localizations.localeOf(context);
var collectibles = widget.collectibles ?? [];
var list = ListView.separated(
separatorBuilder: (context, index) => Divider(
height: 1,
thickness: 1,
),
itemCount: collectibles.length,
itemBuilder: (context, index) {
Collectible collectible = collectibles[index];
return Consumer<Settings>(
builder: (context, settings, child) {
var titleStyle = !collectible.isObtained(settings) ?
null :
TextStyle(
color: Colors.lightGreen,
);
return Material(
color: Colors.transparent,
child: ListTile(
leading: Hero(
tag: collectible.heroTag,
child: Container(
child: Image(image: collectible.icon),
width: 50,
height: 50,
alignment: Alignment.center,
),
),
title: Text("${collectible.name(locale)}", style: titleStyle),
subtitle: collectible.listSubtitle(context),
trailing: collectible.listTrailing(context),
onTap: () => _openDetails(collectible),
onLongPress: () {
var isObtained = collectible.isObtained(settings);
collectible.setObtained(settings, !isObtained);
},
),
);
},
);
}
);
return Scaffold(
appBar: AppBar(
title: _appBarTitle,
centerTitle: true,
backgroundColor: Color.fromRGBO(95, 199, 188, 1.0),
actions: <Widget>[
IconButton(
icon: _searchIcon,
onPressed: () {
log("Searchbutton pressed");
_searchPressed();
//showSearch(context: context, delegate: Datasearch());
}
),
IconButton(
icon: const Icon(Icons.filter_list)
)
],
),
body: NookScaffold(
body: NookSheet(
child:
Column(children:<Widget>[
DropdownButton(onChanged: (String newValue) {
setState(() {
String dropdownValue = newValue;
});
}
),
Expanded(child: list)
],),
),
titleMargin: 0,
)
);
}
void _searchPressed() {
setState(()
{
if (this._searchIcon.icon == Icons.search) {
this._searchIcon = new Icon(Icons.close);
this._appBarTitle = new TextField(
controller: _filter,
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search),
hintText: 'Search...',
),
);
_handleSearchStart();
} else {
this._searchIcon = new Icon(Icons.search);
this._appBarTitle = new Text(widget.title ?? "");
_filteredCollectibles = _collectibles;
_filter.clear();
}
}
);
}
void _handleSearchStart(ListView list) {
setState(() {
_isSearching = true;
});
}
List<ChildItem> _buildList() {
return list.map((contact) => new ChildItem(contact)).toList();
}
List<ChildItem> _buildSearchList() {
if (_searchText.isEmpty) {
return list.map((contact) => new ChildItem(contact))
.toList();
}
else {
List<String> _searchList = List();
for (int i = 0; i < list.length; i++) {
String name = list.elementAt(i);
if (name.toLowerCase().contains(_searchText.toLowerCase())) {
_searchList.add(name);
}
}
return _searchList.map((contact) => new ChildItem(contact))
.toList();
}
}
}
class ChildItem extends StatelessWidget {
final String name;
ChildItem(this.name);
@override
Widget build(BuildContext context) {
return new ListTile(title: new Text(this.name));
}
}
答案 0 :(得分：1)
好像您正在尝试为文本字段实现“键入时搜索”功能。
有两种方法（可能更多）可以使该方法起作用。
您可以使用流来侦听用户键入的内容，并根据输入的数据过滤要提供给列表项的数据。
更好的解释：当用户键入内容时，对于他/她命中的每个字符，您都将数据发送到流中，而从另一侧，您将继续收听流向流的内容。用户键入“ A”，即可将“ A”提供给流，并从另一端获取相同的内容，然后使用“ A”过滤所有以开始/结束（或任何您需要的...）的内容。用户输入的每个字符都适用。
代码示例：（假设您的UI和数据功能位于不同的文件中）
这就是您的BLOC类的外观，它具有一个StreamController，其工作只是监听数据并将其传递到您需要的位置。
class Bloc{
final _textFieldController = StreamController<String>();
//Use this to get data out of the stream
Stream<String> get enteredCharacter => _textFieldController.stream;
//returns functions to change data
Function(String) get addText => _textFieldController.sink.add;
dispose() {
_textFieldController.close();
}
}
//Here we are using a single instance of the bloc class, Which you can access from anywhere.
final bloc = Bloc();
现在，如何使用它？
在数据功能所在的文件中，更重要的是，在馈送到列表视图的数据所在的文件中，您需要侦听流中的内容，如下所示：
var enteredCharacter = "";
bloc.enteredCharacter.listen((data) {
print("This is the character entered by the user: $data");
enteredCharacter = data;
_filterData(); //This function will filter your data based on the characters that the user hits.
});
使用名为autocomplete_textfield的插件，它易于使用，几乎可以完成工作。