如何用固定大小的网格填充背景颜色-Java 学习之路

我正在尝试布局一个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"),
              ],
            ),
          ],
        ),
      ]),

这是它的样子：
enter image description here

注意：我尝试使用Flexible和Expanded来替换Container，但我得到一个例外：

在performLayout（）期间抛出以下断言：RenderFlex子项具有非零flex，但传入高度约束是无限制的 .

1 回答

4
问题是，你正在使用 spaceEvenly 作为对齐，并且永远不会强迫你的细胞占用空间 .

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

你必须使用 Expanded 来修复它 . 我可以帮助你 . 但我不会！ [evil laughs]

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

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

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

现在你问：很酷，但我怎么得到 availableWidth / availableHeight ？

答案： LayoutBuilder .

布局构建器基本上将呈现委托给以 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"))),
      ],
    );
  },
),
```
回复于 2024-04-29T12:38:49+08:00

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

1 回答

相关问题