Flutter中Row布局中使用GridView.count出现错误。

Question

我刚学习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()),
                ),
              ],
            ),
              ],
            ),
          ],
        ),
      ),
    );
  }

我每次都遇到这个错误：“垂直视口给出了无边界的高度”。

- Pla558

Answer 1

除非你想把行分隔开，否则不需要在 Row 中包含 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 包裹起来，并定义一个宽度或者使用一个 flexible 布局。

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

如果你遇到无界高度错误，只需要将其包装在容器或SizedBox中，并定义一个高度即可。

- Praneeth Dhanushka Fernando

---

我尝试了两种方法，但是我得到了相同的错误。 - Pla558

我忘了说这个元素在一个填充元素中。我认为这是错误的原因。有什么办法可以解决吗？ - Pla558

我认为错误不在这部分代码上...似乎出自父级..只需将我的示例作为支架的主体，您会发现它是有效的..如果您能显示此代码的父级，那将会很有用。 - Praneeth Dhanushka Fernando

只需删除列、行和灵活即可。 - Praneeth Dhanushka Fernando

还有其他选项吗？ - Pla558

没必要把它不必要地包装成行和列，GridView会为您完成这项工作。您可以为列设置mainAxisSize：min。 - Praneeth Dhanushka Fernando