如何使用文本字段过滤我的 StreamBuilder 列表?
How can I filter my StreamBuilder-list with a textfield?
我正在制作一个关于希腊克里特岛的应用程序,其中包含岛上的所有景点。
在我的 bottomNavigation 上,我有一个选项卡可以转到一个新屏幕,在应用栏中有一个 TextField,在正文中我有我的完整列表(Firestore > Streambuilder > ListViewBuilder)。当我单击其中一项时,它会重定向到详细信息页面。
为了使搜索更容易,我希望能够在用户开始在文本字段中键入内容时过滤列表。
我似乎无法理解它,因为我也在使用详细信息页面......这是我目前所拥有的:
StreamBuilder(
stream: FirebaseFirestore.instance.collection('Crete').orderBy('name', descending: false).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
return Container(
child: ListView.builder(
shrinkWrap: true,
clipBehavior: Clip.none,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: snapshot.data.docs.length,
itemBuilder: (BuildContext context, index) => _buildListItemCrete(context, snapshot.data.docs[index]),
),
);
},
),
然后是 TextField:
TextField(
onChanged: (String value) {
setState(() {
searchResult = value;
});
},),
还有这个:
TextEditingController _searchController = TextEditingController();
String searchResult = '';
@override
void initState(){
super.initState();
_searchController.addListener(_onSearchChanged);
}
@override
void dispose(){
_searchController.removeListener(_onSearchChanged);
_searchController.dispose();
super.dispose();
}
_onSearchChanged(){
print(_searchController.text);
}
如何通过在文本字段中键入来过滤列表?
我终于在this fantastic tutorial中找到了解决方案。
诀窍是将 streambuilder 更改为 listview.builder 并从我的快照集合中创建一个列表。
我正在制作一个关于希腊克里特岛的应用程序,其中包含岛上的所有景点。 在我的 bottomNavigation 上,我有一个选项卡可以转到一个新屏幕,在应用栏中有一个 TextField,在正文中我有我的完整列表(Firestore > Streambuilder > ListViewBuilder)。当我单击其中一项时,它会重定向到详细信息页面。
为了使搜索更容易,我希望能够在用户开始在文本字段中键入内容时过滤列表。
我似乎无法理解它,因为我也在使用详细信息页面......这是我目前所拥有的:
StreamBuilder(
stream: FirebaseFirestore.instance.collection('Crete').orderBy('name', descending: false).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
return Container(
child: ListView.builder(
shrinkWrap: true,
clipBehavior: Clip.none,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: snapshot.data.docs.length,
itemBuilder: (BuildContext context, index) => _buildListItemCrete(context, snapshot.data.docs[index]),
),
);
},
),
然后是 TextField:
TextField(
onChanged: (String value) {
setState(() {
searchResult = value;
});
},),
还有这个:
TextEditingController _searchController = TextEditingController();
String searchResult = '';
@override
void initState(){
super.initState();
_searchController.addListener(_onSearchChanged);
}
@override
void dispose(){
_searchController.removeListener(_onSearchChanged);
_searchController.dispose();
super.dispose();
}
_onSearchChanged(){
print(_searchController.text);
}
如何通过在文本字段中键入来过滤列表?
我终于在this fantastic tutorial中找到了解决方案。
诀窍是将 streambuilder 更改为 listview.builder 并从我的快照集合中创建一个列表。