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

Question

我正在尝试根据我拥有的类别显示列表中的项目。我从 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, right: 8, bottom: 8),
              child: Align(
                alignment: Alignment.centerLeft,
                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,
              color: Colors.white,
            ),
            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),
      ),
    );
  }
}

Answer 1

您可以在列表项上添加一个标志，说明该项是否属于类别，然后使用 ListView.builder 您可以为每种项返回不同的小部件：

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    var item = items[index];
    
    if(item.isCat){
      return CatWidget();
    }else{
      return ItemWidget();
    }
  },
);