如何像在 GridView 中一样缩小 child 视图

Question

有谁知道如何在 Flutter 中完成 child 视图的缩小，如第一张图片所示。我使用了一个 gridView，它做得很好。

第二张图我用了一行，我用Container和Constrains试了一下，效果不是很好。 ;D

 return new GridView.count(
    crossAxisCount: 3,
    padding: const EdgeInsets.all(16.0),
    mainAxisSpacing: 4.0,
    shrinkWrap: true,
    crossAxisSpacing: 4.0,

    children: widget.foodItems.map((FoodViewModel food){
        return new FoodTile(
            name: food.name,
            icon: food.icon
            , onPressed: (bool state) {
              food.isSelected = state;
              widget?.onFoodItemTaped(food, state);
            },
        );
    }).toList(),
);

这里的 row-code 没有任何限制 return 新的 SingleChildScrollView( child: 新容器( 保证金：const EdgeInsets.all(16.0),

      child:new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          new Container(
            padding: const EdgeInsets.all(2.0),
            child: new FoodTile(name: "Tile one", onPressed:(bool state){}),
          ),
          new Container(
            padding: const EdgeInsets.all(2.0),
            child: new FoodTile(name: "Tile two", onPressed:(bool state){}),
          ),
          new Container(
            padding: const EdgeInsets.all(2.0),
            child: new FoodTile(name: "Tile three", onPressed:(bool state){}),
          )

        ],
      )
    ));

Complete source code to the tile

Answer 1

您应该将 FoodTile 的实例包装在 Flexible 或 Expanded 中，以便 Row 将对它们应用灵活的布局模型 space 他们均匀。

Answer 2

如果有人想知道最终结果如何。我对 "LayoutBuilder-Solution" 还是有点不满意，但我知道它对我有用。

return new SingleChildScrollView(
    child: new Container(
      margin: const EdgeInsets.all(16.0),

      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Expanded(child: new LayoutBuilder(builder: (BuildContext context,  BoxConstraints constraints){
            return new Container(
              constraints: new BoxConstraints.tightFor(width: constraints.maxWidth, height: constraints.maxWidth),
              padding: const EdgeInsets.all(2.0),
              child: new FoodTile(name:"hallo",onPressed: (bool state){}),
            );
          })),
          new Expanded(child: new LayoutBuilder(builder: (BuildContext context,  BoxConstraints constraints){
            return new Container(
              constraints: new BoxConstraints.tightFor(width: constraints.maxWidth, height: constraints.maxWidth),
              padding: const EdgeInsets.all(2.0),
              child: new FoodTile(name:"hallo 2",onPressed: (bool state){}),
            );
          })),
          new Expanded(child: new LayoutBuilder(builder: (BuildContext context,  BoxConstraints constraints){
            return new Container(
              constraints: new BoxConstraints.tightFor(width: constraints.maxWidth, height: constraints.maxWidth),
              padding: const EdgeInsets.all(2.0),
              child: new FoodTile(name:"hallo 3",onPressed: (bool state){}),
            );
          })),
        ],
      ),

如何像在 GridView 中一样缩小 child 视图

How do I shrink the child view like in the GridView

dart

flutter