简单的布局挑战

Question

我正在尝试创建一张显示游戏中得分的卡片。这张卡比这个例子更复杂，但是在卡的中间我想要一排。该行包含两列。第一列包含两行。在这两个行中的每一行都是球队名称和得分。

  Widget build(BuildContext context) {
    return Card(
      child:  Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('Team A'),
                  Text('100'),
                ],
              ),
              Row(
                children: <Widget>[
                  Text('Team B'),
                  Text('100'),
                ],
              ),
            ],
          ),
          Text('15:00'),
        ],
      ),
    );
  }

现在我想要在Expanded中包装显示团队名称的Text小部件。一旦我这样做，我得到一个很长的描述性错误，基本上说我的Row有一个没有有限宽度的父，但它有一个要求扩展的孩子，这两个是冲突的。我知道他们有冲突。我如何解决它？我绝对不想给父Widget（卡）一个有限的宽度。

Answer 1

这并不是100％清楚你想要的记分板是什么样的 - 这是一个快速模拟会有很大帮助的例子。

但是，我可以告诉你为什么你会得到一个例外。

当你将'Team A'文本包装在Expanded中时，在布局过程中，flutter会混淆。顶层行有两个项目，它们都没有定义任何类型的大小，因此它使它们在十字轴（垂直）中尽可能大，在主轴（水平）中尽可能小。这意味着他们将他们的大小委托给他们的孩子。

通过将“Team A”包装在Expanded中，您基本上可以告诉它：

“嘿，你的父小部件非常大。我希望你把所有尚未被使用的东西拿走，而不是你通常会有多大。”

它响应

“当然老板，但我刚检查过，我的父母实际上没有一个规定的尺寸....所以我不知道该怎么做。猜猜我只会抛出异常。”

修复是调整父级的大小，在这种情况下，父级是包含两行的列（geez，这令人困惑）。

我想从你的描述中你想要的是该列占用尽可能多的空间，所以你只需要将它包装在扩展中。因此，如果您这样做，您的问题应该自行解决：

  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(child: Text('Team A')),
                    Text('100'),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Expanded(child: Text('Team B')),
                    Text('100'),
                  ],
                ),
              ],
            ),
          ),
          Text('15:00'),
        ],
      ),
    );
  }

这样，包含两行的列将展开以在布局过程中占用所有可用空间。一旦“团队A”文本到处尝试其布局传递，它就可以简单地（水平地）调整到该列的大小。

然后，您可以使用flex因子来获得所需的一切。

只是一个FYI - 一旦你开始获得大量的嵌套容器和行，你可能想要考虑一个CustomMultiChildLayout。由于您需要自己进行布局计算，因此稍微更加手动，但从长远来看，这可能会更容易，具体取决于您的记分板的复杂程度。