简单的布局挑战

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'),
],
),
);
}

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

Answer 1

并不是100% 清楚您希望记分牌看起来像什么 - 这是一个快速模型将有很大帮助的实例。

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

当您将"团队 A"文本包装在扩展中时，在布局传递期间颤振会感到困惑。顶层行有两个项目，这两个项目都没有定义任何类型的大小，因此它使它们在交叉轴(垂直(中尽可能大，在主轴(水平(中尽可能小。这意味着他们将自己的规模委托给他们的孩子。

通过将"团队 A"包装在扩展中，您基本上是在告诉它：

"嘿，你，你的父小部件很大。我希望你把所有没有被使用的东西都拿走，而不是你平时有多大。

它的响应方式为

"当然是老板，但我刚刚检查过，我的父母实际上都没有 定义的大小....所以我不知道该怎么办。猜猜我只会扔一个 例外。

解决方法是调整父级的大小，在本例中是包含两行的列(天哪，这很令人困惑(。

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

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"文本开始尝试其布局传递，它就可以简单地(水平(调整自己的大小以达到该列。

然后，您可以使用弹性因子来获得您想要的一切。

仅供参考 - 一旦您开始获得大量嵌套容器和行，您可能需要考虑使用CustomMultiChildLayout。由于您需要自己进行布局计算，因此需要手动操作，但从长远来看，这可能会更容易，具体取决于记分牌的复杂程度。