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

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是对齐,并且永远不会强迫你的细胞占用空间.

所以最后,你的单元格占用的空间最小=>这里,只是文本的大小.

你必须玩它Expanded来解决它.我可以帮助你.但我不会![邪恶的笑]

在您的情况下,有一种更简单的方法来实现所需的效果.那是GridView.

有了GridView你可以指定一个gridDelegate具有一些独特的网格规则.现有的一个gridDelegate是SliverGridDelegateWithFixedCrossAxisCount确保有固定数量的列; 细胞有宽度width / columnCount; 并具有自定义的宽高比.

在您的情况下,您需要2列和比例,availableWidth / availableHeight以便4个单元格填充屏幕,但没有溢出.

现在你问:很酷,但我怎么办availableWidth / availableHeight？

答案:LayoutBuilder.

布局构建器基本上将呈现委托给带有Constraintsas参数的回调.该约束包含小部件可以具有的最小/最大宽度/高度.

=> 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 () )