我正在尝试创建一个带有平面按钮的按"类别"排序的 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
},
);
}
}
我的问题可以这样回答:如何在颤振中使用 where with orderby
然后是:
.where('category', arrayContainsAny:[category.categoryName]) .orderBy('createdAt', descending: true)
关于查询,我试图允许来自不同类的变量查询是愚蠢的。我成功地从 FlatButton 查询请求portfolioRow()
当所有代码都作为子代码附加到_portfolioCategoriesState()
中时
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]));
},
)
]),
)
],
));
}
}