Flutter - 不可滚动的网格

Question

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

给你一张大图——

我正在尝试创建一个取决于设备宽度的响应式布局。
它应该分为 2 部分，通过一列无缝连接。

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),
              ),
            );
          },
        ),
      ),
    ],
  ),
)