行布局错误中的 Flutter GridView.count答案

【问题标题】：Flutter GridView.count in Row Layout Error行布局错误中的 Flutter GridView.count
【发布时间】：2019-10-14 12:35:17
【问题描述】：

我是 Flutter 的新手，我想连续绘制一个图像网格。我使用了这个例子Flutter - Layout a Grid，但它每次都会显示错误

Widget buildView(){
    return new Container(
      color: Colors.white,
      child:
      new Padding(
        padding: EdgeInsets.all(8.0),
        child: new Column(
          children: <Widget>[
            new Row(
              children: <Widget>[
                Flexible(
                  child: new GridView.count(
                      crossAxisCount: 4,
                      childAspectRatio: 1.0,
                      padding: const EdgeInsets.all(4.0),
                      mainAxisSpacing: 4.0,
                      crossAxisSpacing: 4.0,
                      children: <String>[
                        'https://via.placeholder.com/150',
                        'https://via.placeholder.com/150',
                        'https://via.placeholder.com/150',
                        'https://via.placeholder.com/150',
                        'https://via.placeholder.com/150',
                        'https://via.placeholder.com/150',

                      ].map((String url) {
                        return new GridTile(
                            child: new Image.network(url, fit: BoxFit.cover));
                      }).toList()),
                ),
              ],
            ),
              ],
            ),
          ],
        ),
      ),
    );
  }

每次出现此错误“垂直视口被赋予无限高度”时，我都会编码

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

除非您尝试划分行，否则您不需要将 GridView 包装在行中。您可以只使用 GridView。

new GridView.count(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: <String>[
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',
            'https://via.placeholder.com/150',

          ].map((String url) {
            return new GridTile(
                child: new Image.network(url, fit: BoxFit.cover));
          }).toList()),

如果你真的想将它包装在一行中，你需要用一个容器包装 GridView 并定义一个宽度或用一个灵活的包装

Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Flexible(
            child: new GridView.count(
                crossAxisCount: 4,
                childAspectRatio: 1.0,
                padding: const EdgeInsets.all(4.0),
                mainAxisSpacing: 4.0,
                crossAxisSpacing: 4.0,
                children: <String>[
                  'https://via.placeholder.com/150',
                  'https://via.placeholder.com/150',
                  'https://via.placeholder.com/150',
                  'https://via.placeholder.com/150',
                  'https://via.placeholder.com/150',
                  'https://via.placeholder.com/150',    

                ].map((String url) {
                  return new GridTile(
                      child: new Image.network(url, fit: BoxFit.cover));
                }).toList()),
          ),
        ],
      ),

如果你得到无限的高度错误，只需用容器或大小的盒子包装它并定义一个高度

【讨论】：

我尝试了这两种方法，但我变成了同样的错误
我忘了说我在填充元素中有这个元素。我认为这会发生错误。知道如何解决这个问题吗？
我认为错误不在于这部分代码..似乎来自父级..试试我的例子作为脚手架的主体，你会看到它的工作..如果你能展示此代码的父级会很有用
只删除列、行和灵活
还有其他选择吗？