dart - 如何用固定大小的网格填充背景颜色

Question

我正在尝试布局一个 4x4 网格，每个网格的中心都有文本，并填充背景色，但我无法让背景色扩展以填充整个网格正方形。

这是界面代码:

  body: new Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new Column(
              children: [
                new Container(
                  color: Colors.pink,
                  child: new Text("Column 1a"),
                )
              ],
            ),
            new Column(
              children: [
                new Text("Column 1b"),
              ],
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new Column(
              children: [
                new Text("Column 2a"),
              ],
            ),
            new Column(
              children: [
                new Text("Column 2b"),
              ],
            ),
          ],
        ),
      ]),

这是它的样子:

注意:我曾尝试使用 Flexible 和 Expanded 来替换 Container，但出现异常:

在 performLayout() 期间抛出了以下断言: RenderFlex 子级具有非零弹性，但传入的高度约束是无界的。

Answer 1

问题是，您正在使用 spaceEvenly 作为对齐方式，并且从不强制您的单元格占用可能的空间。

所以最后，您的单元格占用的空间尽可能少 => 在这里，只是文本的大小。

您必须使用 Expanded 来修复它。我可以帮助您。但我不会! [邪恶的笑]

---

在您的情况下，有一种更简单的方法可以达到预期的效果。即 GridView。

使用 GridView，您可以指定一个 gridDelegate 来拥有一些独特的网格规则。一个现有的 gridDelegate 是 SliverGridDelegateWithFixedCrossAxisCount，它确保有固定数量的列；单元格的宽度为 width/columnCount ；并具有自定义的宽度/高度比。

在您的情况下，您需要 2 列且比率为 availableWidth/availableHeight，以便 4 个单元格填满屏幕，但不会溢出。

现在你问:很酷，但是我如何获得 availableWidth/availableHeight ？

答案:LayoutBuilder。

布局构建器基本上将渲染委托(delegate)给一个回调，该回调将 Constraints 作为参数。该约束包含小部件可以具有的最小/最大宽度/高度。

=> availableWidth/availableHeight 将是 constaint.maxWidth/constaint.maxHeight。

最终结果将更加简洁和可读；具有易于定制的好处(更改列数，添加少于/多于 4 个单元格，...)

new LayoutBuilder(
  builder: (context, constaint) {
    return new GridView(
      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: constaint.maxWidth / constaint.maxHeight,
      ),
      children: <Widget>[
        new Container(color: Colors.red, child: new Center(child: new Text("data"))),
        new Container(color: Colors.purple, child: new Center(child: new Text("data"))),
        new Container(color: Colors.yellow, child: new Center(child: new Text("data"))),
        new Container(color: Colors.green, child: new Center(child: new Text("data"))),
      ],
    );
  },
),