如何解决如何根据类别显示列表中的项目?
我正在尝试根据我拥有的类别显示列表中的项目。我从 Cloud Firestore 获取它们并根据类别划分它们,但我不知道如何根据我选择的类别在屏幕上显示这些项目。所以,我想知道是否有人可以提供帮助。
请在下面找到我的代码:
import 'package:Flutter/material.dart';
import 'package:uploadvideo/addNewVideo.dart';
import 'package:uploadvideo/info.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key,this.title,}) : super(key: key);
final String title;
List<String> items = [
"All","Research","Technology","Math and Science","Design"
];
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String category = "";
String selectedValue = "All";
List list = [];
final firestoreInstance = FirebaseFirestore.instance;
void _onpressed() {
setState(
() {
FirebaseFirestore.instance.collection('Record').get().then(
(QuerySnapshot querySnapshot) {
querySnapshot.docs.forEach(
(doc) {
if (selectedValue == "All") {
list.add(doc["category"]);
print(list);
} else if (selectedValue == "Research") {
if (doc["category"] == "Research") {
list.add(doc["category"]);
print(list);
}
} else if (selectedValue == "Technology") {
if (doc["category"] == "Technology") {
list.add(doc["category"]);
print(list);
}
} else if (selectedValue == "Math and Science") {
if (doc["category"] == "Math and Science") {
list.add(doc["category"]);
print(list);
}
} else if (selectedValue == "Design") {
if (doc["category"] == "Design") {
list.add(doc["category"]);
print(list);
}
}
},);
},);
},);
}
_downloadImage(context) {
return StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('Record').snapshots(),builder: (context,snapshot) {
if (!snapshot.hasData) return LinearProgressIndicator();
return snapshot.data.docs.isEmpty == false
? _buildList(context,snapshot.data.docs)
: Center(
child: Text(
"No tutorials record",style: TextStyle(
fontSize: 30,color: Color(0xFF002545),),);
}
Widget _buildList(BuildContext context,List<DocumentSnapshot> snapshot) {
return ListView(
padding: const EdgeInsets.only(top: 15.0),children:
snapshot.map((data) => _buildListItem(context,data)).toList());
}
Widget _buildListItem(BuildContext context,DocumentSnapshot data) {
final record = Record.fromSnapshot(data);
return Padding(
key: ValueKey(record.category),padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 8.0),child: Card(
child: Column(
children: [
// Image.network(record.url),Padding(
padding:
const EdgeInsets.only(left: 8.0,right: 8,top: 8,bottom: 3),child: Align(
alignment: Alignment.centerLeft,child: Text(
record.title,style: TextStyle(
color: Colors.orange,fontSize: 14,fontWeight: FontWeight.bold),Padding(
padding: const EdgeInsets.only(left: 8.0,bottom: 8),child: Text(
record.category,style: TextStyle(
color: Color(0xFF002545),fontWeight: FontWeight.bold,fontSize: 18),],);
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF1A5993),title: Text(widget.title),actions: [
DropdownButton(
value: selectedValue,items: widget.items.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,child: Text(
value,style: TextStyle(color: Colors.black),);
}).toList(),icon: Icon(
Icons.arrow_downward,color: Colors.white,elevation: 16,style: TextStyle(color: Colors.white),underline: Container(
height: 2,onChanged: (String value) {
setState(
() {
selectedValue = value;
_onpressed();
},);
},)
],body: Container(
width: size.width,height: size.height,child: _downloadImage(context),floatingActionButton: FloatingActionButton(
backgroundColor: Colors.Amber,onpressed: () {
Navigator.push(
context,MaterialPageRoute(
builder: (context) => AddNewVideo(),);
},child: Icon(Icons.add),);
}
}
解决方法
您可以在列表项上添加一个标志,说明该项是否属于类别,然后使用 ListView.builder 您可以为每种项返回不同的小部件:
ListView.builder(
itemCount: items.length,itemBuilder: (context,index) {
var item = items[index];
if(item.isCat){
return CatWidget();
}else{
return ItemWidget();
}
},);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。