Flutter

Question

我正在尝试创建一个按“类别”排序的 Flutter 作品集，并带有平面按钮。单击类别时，将根据时间戳降序过滤并显示相关项目。

我已经成功按降序显示项目，但是无法按键值显示我的项目。

“类别”平面按钮的代码：

class PortfolioCategories extends StatefulWidget {
  @override
  _PortfolioCategoriesState createState() => new _PortfolioCategoriesState();
}

class _PortfolioCategoriesState extends State<PortfolioCategories> {
  void _select(CategoryChoice category) {
    setState(() {
    PortfolioRow.itemBuilder(context, category.categoryIndex);
    });
  }

class CategoryChoice {
  const CategoryChoice({this.category, this.categoryIndex});

  final String category;
  final String categoryIndex; //value of 'category' key in Firebase
}

const List<CategoryChoice> categories = const <CategoryChoice>[
  const CategoryChoice(category: 'ALL', categoryIndex: 'Category_ALL'),
  const CategoryChoice(
      category: 'MULTIMEDIA DESIGN', categoryIndex: 'Category_1'),
  const CategoryChoice(category: 'CURATORIAL', categoryIndex: 'Category_2'),
  const CategoryChoice(category: 'ART', categoryIndex: 'Category_3'),
];

我的投资组合代码：

class PortfolioRow extends StatelessWidget {
  const PortfolioRow({Key key, this.category}) : super(key: key);

  final CategoryChoice category;
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Firestore.instance
          .collection('portfolio')
          .orderBy('createdAt', descending: true)
          .snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return Text("Loading...");
        return GridView.builder(
            physics: ScrollPhysics(),
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) =>
            portfolioContainer(context, snapshot.data.documents[index])); //portfolioContainer is the portfolio projects that will be displayed
      },
    );
  }
}

Answer 1

我的问题可以这样回答：

然后：

.where('category', arrayContainsAny:[category.categoryName]) .orderBy('createdAt', descending: true)

关于查询，我很愚蠢地尝试允许来自不同类的变量查询。当所有代码都作为子项附加在 _portfolioCategoriesState() 中时，我成功地查询了从 FlatButton 到 portfolioRow() 的请求，如下所示：

class PortfolioCategoriesAndDisplay extends StatefulWidget {
  @override
  _PortfolioCategoriesAndDisplayState createState() =>
      new _PortfolioCategoriesAndDisplayState();
}

String _showCat = 'All'; //default state is All

class CategoryChoice {
  const CategoryChoice({this.category, this.categoryName});

  final String category;
  final String categoryName; //'category.[Name]' in Firebase

  @override
  String toString() {
    return 'category: $category categoryName: $categoryName';
  }
}

const List<CategoryChoice> categories = const <CategoryChoice>[
  const CategoryChoice(categoryName: 'All'),
  const CategoryChoice(categoryName: 'Multimedia Design'),
  const CategoryChoice(categoryName: 'Curatorial'),
  const CategoryChoice(categoryName: 'Sustainability'),
];

class _PortfolioCategoriesAndDisplayState
    extends State<PortfolioCategoriesAndDisplay> {
  void _select(String newCategory) {
    setState(() {
      _showCat = newCategory;
    });
  }

  Widget build(BuildContext context) {
    return Container(
        child: Row(
      children: [
        Expanded(
          child:
              Column(children: [
            Container(
              child:
                  Row(children: [
                FlatButton(
                    onPressed: () {
                      _select(categories[0].categoryName);
                    },
                    child: Text(
                      'ALL',
                    )),
                FlatButton(
                    onPressed: () {
                      _select(categories[1].categoryName);
                    },
                    child: Text(
                      'MULTIMEDIA DESIGN',
                    )),
                FlatButton(
                    onPressed: () {
                      _select(categories[2].categoryName);
                    },
                    child: Text(
                      'CURATORIAL',
                    )),
                FlatButton(
                    onPressed: () {
                      _select(categories[3].categoryName);
                    },
                    child: Text(
                      'SUSTAINABILITY',
                    )),
              ]),
            ),
            StreamBuilder(
              stream: Firestore.instance
                  .collection('portfolio')
                  .where('category', arrayContainsAny: [_showCat])
                  .orderBy('projectOrder', descending: true)
                  .snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return Text("Loading...");
                return GridView.builder(
                    physics: ScrollPhysics(),
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 70.0,
                      mainAxisSpacing: 70.0,
                      childAspectRatio:
                          MediaQuery.of(context).size.height / 1280,
                    ),
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (context, index) => portfolioContainer(
                        context, snapshot.data.documents[index]));
              },
            )
          ]),
        )
      ],
    ));
  }
}

Flutter - 根据Firebase keys降序过滤显示项

Flutter - Filter out the display items according to Firebase keys, and in descending order

filter

web

firebase

display