Flutter-不可滚动网格

Question

[有没有一种方法可以构建一个本身不能滚动且其大小取决于其子级的网格，就像我们可以在行或列中指定mainAxisSize：MainAxisSize.min的方法一样。

给您大图景-

我正在尝试根据设备的宽度创建响应式布局。它应分为两部分，并通过一列无缝连接。

1）2个大容器，其大小取决于屏幕宽度，并考虑到它们之间的小空间。每个容器的宽度和高度将相同（方形容器）。

2）相同的想法，但是有3行，每行由3个较小的容器组成。这将创建一个网格。尽管网格本身不可滚动，并且网格的大小将取决于其子级，但这非常重要。仅应将它与SingleChildScrollView中包含的页面的其余部分一起滚动。

特别是因为每个容器的高度都必须与宽度相同，所以我考虑将行，列和LayoutBuilder结合使用-它们为我提供了我所需要的全部功能。

但是，在手动执行操作之前，我想知道是否有某些东西可以开箱即用。

Answer 1

这样的事情？

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
      Container(
        padding: const EdgeInsets.all(10.0),
        child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          itemCount: 21,
          itemBuilder: (context, index) {
            return Container(
              decoration: BoxDecoration(
                border: Border.all(width: 3.0),
              ),
            );
          },
        ),
      ),
    ],
  ),
)