在简单 Flutter 应用程序中使用 GridViews 的问题

Question

我最近开始学习 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",
            ),
          ]),
        ]));

我想要的功能就像图片中描述的那样：如果您点击“Produkte”中的一个图标（ProdCategory），它会从“Produkte”中删除并添加到“Einkaufswagen”中，反之亦然。它应该作为简单的购物清单服务。

因此我实现了：

  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.

Answer 1

这个怎么样？

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),