我最近开始学习 flutter ，因此正在构建一个教学应用程序，我称之为“Basketly”。
UI结构非常简单:
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Basketly - dein Einkauf'),
actions: <Widget>[
new FlatButton.icon(
label: new Text("Einstellungen"),
onPressed: () {
/*nav to settings */
Navigator.push(context,
MaterialPageRoute(builder: (context) => SettingsView()));
},
icon: new Icon(Icons.settings),
),
],
),
body: new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text(
"Einkaufswagen",
style: new TextStyle(
fontSize: 12.0,
color: Colors.amber,
fontWeight: FontWeight.w600,
fontFamily: "Roboto"),
),
Expanded(
child: new GridView.count(
crossAxisCount: 6,
children: this.widget.basketItems,
),
),
new Divider(color: Colors.grey),
new Text(
"Produkte",
style: new TextStyle(
fontSize: 12.0,
color: Colors.amber,
fontWeight: FontWeight.w600,
fontFamily: "Roboto"),
),
new GridView.count(
crossAxisCount: 6,
children: this.widget.allItems,
shrinkWrap: true),
new Divider(color: Colors.grey),
//TODO here we input some expandeable gridviews or something
new MetaProdCategory("Reinigungsmittel"),
new MetaProdCategory("Getränke"),
new MetaProdCategory("Obst"),
new MetaProdCategory("Milch & Käse"),
new MetaProdCategory("Gemüse"),
new Row( children: <Widget>[
new Switch(onChanged: switchChanged, value: false),
new Text("Vegan"),
new Switch(onChanged: switchChanged, value: false),
new Text(
"Bio",
),
new Switch(onChanged: switchChanged, value: false),
new Text(
"Regional",
),
new Switch(onChanged: switchChanged, value: false),
new Text(
"Fair",
),
]),
]));
我想要的功能类似于图片中的描述:如果点击“产品”中的图标(ProdCategory)之一，则会将其从“产品”中删除并添加到“Einkaufswagen”中，反之亦然。它应该作为简单的购物 list 服务器。
因此，我实现了:
List<ProdCategory> basketItems; // the items currently in the basket
List<ProdCategory> allItems; // all Items
...作为保留ProdCategory项目的数据结构。
以及从列表中添加/删除它们的回调:
// updates the current basket by adding a productCategory to it
// (and removing from allItems)
addToBasket(ProdCategory prod) {
setState(() {
log("addToBasket called");
prod.upOrDown = !prod.upOrDown;
this.widget.basketItems.add(prod);
this.widget.allItems.remove(prod);
});
..包括一些日志记录，以确保一切正常
log("---------basketItems:");
this.widget.basketItems.forEach((element) {
log(element.stringify());
});
log("----------allItems:");
this.widget.allItems.forEach((element) {
log(element.stringify());
});
现在解决了问题!
当我选择ProdCategories(在这种情况下为Brot)之一时，根据日志，一切都按预期工作:
[log] you tapped on Brot
[log] addToBasket called
[log] ---------basketItems:
[log] Brot true
[log] ----------allItems:
[log] Bier false
[log] Senf false
[log] Lauch false
[log] Steak false
[log] Bergkäse false
[log] Mehl false
[log] Kürbis false
[log] Oliven false
[log] Pfeffer false
如您所见，Brot现在驻留在basketItems中，并且已从allItems中删除-符合预期。
...但是，不知何故，UI不在Einkaufswagen GridView中显示Brot。
我不知道我在做什么错，并且由于几个小时没有成功而正在解决这个问题。
似乎GridView周围的Flutter中存在很多错误，尤其是在Column中使用时---但我怀疑必须为我需要的可用性找到适当的解决方案？
Here is the whole source.
最佳答案
这个怎么样？
new GridView.builder(
itemBuilder: (BuildContext context, int index) {
return this.widget.basketItems[index];
},
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: this.widget.basketItems.length,
shrinkWrap: true),
和
new GridView.builder(
itemBuilder: (BuildContext context, int index) {
return this.widget.allItems[index];
},
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
itemCount: this.widget.allItems.length,
shrinkWrap: true),