行中忽略的小部件对齐

Posted 2023-02-23

【中文标题】行中忽略的小部件对齐

【英文标题】：Alignment of widgets ignored in row

【发布时间】：2019-11-10 05:40:36

【问题描述】：

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

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 只是一个 Container，其 BoxDecoration 被 GestureDetector 包裹。

我想要实现的是，左侧气泡与左侧对齐，右侧与右侧对齐，但相反，两者都在左侧相邻放置，尽管行占据了我屏幕的整个宽度，如您所见（蓝色边框）：

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

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

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

【参考方案1】：

您正在为容器的项目而不是容器本身提供对齐方式

尝试给行对齐

Container getContainer()
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            height: 50,
            width: 50,

            child: Center(child: Text("Left")),
          ),
          Container(
            height: 50,
            width: 50,

            child: Center(child: Text("Right")),
          )
        ],
      ),
      decoration: BoxDecoration( //TODO remove after testing
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.blue),
      ),
    );
  

【讨论】：

虽然你的答案对于对齐部分是正确的，但我无法在气泡之间画一条线。

你说的是哪一行，我想你可以为容器使用边框

【参考方案2】：

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

默认情况下，子项在行（水平）和列（垂直）内按顺序定位，这就是您在附加的屏幕截图中得到的。如果您只是想将 2 个圆圈定位在 Row 的左右两端，您可以使用 MainAxisAlignment 的值 spaceBetween，这会将空闲空间均匀地分布在子级之间。

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

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