flutter - 行中忽略的小部件对齐

Question

我正在创建一个显示一些气泡的新小部件，这些气泡应该用线连接。

5-------6
|
4-------3
        |
1-------2

我选择了一个 ListView 作为外部小部件，如果我理解正确的话，这应该会给我滚动性:

return Expanded(
  child: ListView(
    children: _createLWItems(_createBubbles()),        
  ),
);

Children 是我内部小部件的列表。每个小部件都是一行，因此我可以将两个气泡并排放置:

    return Container(
      child: Row(
        children: <Widget>[
          Container(
            child: bubbleItem1,
            alignment: Alignment.centerLeft,
          ),
          Container(
            child: bubbleItem2,
            alignment: Alignment.centerRight,
          ) 
        ],
      ),
      decoration: BoxDecoration( //TODO remove after testing
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.blue),          
      ),
    );

BubbleItem 只是一个带有 BoxDecoration 并包裹着 GestureDetector 的容器。

我想要实现的是，左边的气泡向左对齐，右边向右对齐，但是，尽管行占据了我屏幕的整个宽度，但两者并排放置在左侧，如您所见(蓝色边框):

当我读到here行小部件有一个 MainAxisAlignment，但这只会将所有子元素左对齐、右对齐、居中对齐等，这不是我想要的。

我怎样才能按照我想要的方式放置这些气泡？如果它们放置正确，我想用线连接它们。有没有办法不用计算就可以做到这一点？我的想法是在带线的气泡之间插入另一个小部件，但我需要以某种方式告诉它，它应该占据他所在行的气泡之间的整个空间。

目前我有点不确定我是否应该计算任何东西，因为我读到一些关于“你无法在渲染之前计算”的内容，但另一方面我缺少一些理解如何在没有 flutter 的情况下进行计算

Answer 1

对齐确实适用于 Row children，但不是您期望的方式。例如，如果您有一个 Row 子级，其高度为 Row 的一半，您可以使用 Alignment 来指定您希望该子级位于 Row 的顶部还是底部 - 默认为居中。

默认情况下，子项按顺序位于一行(水平)和一列(垂直)内，这就是您在所附屏幕截图中看到的内容。如果您只想将 2 个圆定位在行的左右两端，您可以使用 spaceBetween 的 MainAxisAlignment 值，它将自由空间均匀地放置在 children 。

但是，如果您还想在圆圈之间画一条线，那么您将没有任何剩余空间可以在 Row 中分配，因此 MainAxisAlignment 将无济于事。相反，您想要的是圆圈之间行内的 Expanded 小部件。这将创建一个小部件，该小部件占用 Row 中的所有剩余空间，这是您希望行所在的位置。

  Row(
    children: <Widget>[
      Container(
        child: bubbleItem1,
        alignment: Alignment.centerLeft,
      ),
      Expanded(
        child: Divider(),
      ),
      Container(
        child: bubbleItem2,
        alignment: Alignment.centerRight,
      ) 
    ],
  )