Question

有没有人知道如何在Flutter中完成缩小子视图，如第一张图所示。我使用了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(),
);

这里的行代码没有任何约束返回新的SingleChildScrollView（孩子：新容器（ margin：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将灵活的布局模型应用于它们并均匀分布。

Answer 2

如果有人想知道最终结果如何。我对＆＃34; LayoutBuilder-Solution＆＃34;仍然有点不满意。但它对我来说是有用的。

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中缩小子视图

2 个答案: