如何根据类别显示列表中的项目？

问题描述

我正在尝试根据我拥有的类别显示列表中的项目。我从 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();
    }
  },);