Question

我正在尝试布局一个4x4网格，文本位于每个网格的中心，背景颜色为填充，我无法将背景颜色展开以填充整个网格方块。

这是UI代码：

  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子项具有非零flex，但传入高度约束是无限制的。

Answer 1

问题是，你使用spaceEvenly作为对齐方式，并且永远不会强迫你的单元格占用空间。

所以最后，你的细胞占用的空间最少=＆gt;这里，只是文字的大小。

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

在您的情况下，有一种更容易实现预期效果的方法。那是GridView。

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

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

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

答案：LayoutBuilder。

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

=＆GT; 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"))),
      ],
    );
  },
),

Answer 2

您的gridView小部件位于支架内。脚手架有一个身体。为该物体定义颜色。

return Scaffold :
  appBar...
  body : Container (color : Colors.yellow , child : nameGridViewWidget () )

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

2 个答案: