简单布局挑战

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 中。一旦我这样做，我就会得到一个很长的描述性错误，基本上说我的 Row 有一个没有有限宽度的父级，但它有一个要求扩展的子级，这两个是冲突的。我知道他们有冲突。我如何解决它？我绝对不想给父 Widget（卡片）一个有限的宽度。

Answer 1

并不是 100% 清楚您希望计分板的外观 - 这是一个快速 mock-up 会很有帮助的例子。

但是，我可以告诉您为什么会出现异常。

当您将 'Team A' 文本包裹在扩展中时，在布局过程中，抖动会变得混乱。顶层行有两个项目，它们都没有定义任何类型的大小，因此它使它们在横轴（垂直）上尽可能大，在主轴（水平）上尽可能小。这意味着他们将规模委托给 children.

通过将 'Team A' 包裹在扩展中，您基本上是在告诉它：

"Hey you, your parent widget is pretty big. I want you to take up all of it that isn't already being used instead of being how big you would normally be."

它以

响应

"Sure boss, but I've just checked and none of my parents actually have a defined size.... so I don't know what to do. Guess I'll just throw an exception."

解决方法是调整 parent 的大小，在本例中是包含两行的列（哎呀，这很混乱）。

根据您的描述，我认为您希望该列尽可能多地占据 space，因此您只需要将其也包装在扩展中即可。因此，如果您这样做，您的问题应该会自行解决：

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

这样，包含两行的列会在其布局过程中展开以获取所有可用的 space。一旦 'Team A' 文本开始尝试其布局传递，它就可以简单地（水平）调整自身的大小到该列。

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

仅供参考 - 一旦您开始获得大量嵌套容器和行，您可能需要考虑 CustomMultiChildLayout。由于您需要自己进行布局计算，因此手动操作稍微多一些，但根据记分板的复杂程度，较长的运行可能会更容易。

简单布局挑战

Simple Layout Challenge

flutter

flutter-layout