Question

我正在创建一个新的小部件，其中显示了一些气泡，应该用线将其连接起来。

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

我选择了ListView作为外部窗口小部件，如果我正确理解的话，这应该使我具有可滚动性：

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

孩子是我内部小部件的列表。每个小部件都是一行，因此我可以将两个气泡彼此相邻放置：

    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，但这只会使所有子项向左，向右，居中等方向对齐，而不是我的初衷。

如何按照我的意图放置气泡？如果它们放置正确，我想用线连接它们。有没有一种无需计算的方法？我的想法是在占据一行的气泡之间插入另一个小部件，但我需要以某种方式告诉它，它应该占据一行气泡之间的整个空间。

目前我不确定是否应该计算任何东西，因为我读到一些有关“在渲染之前无法计算”的知识，但是另一方面，我缺少一些了解如何在没有抖动的情况下进行计算它。

Answer 1

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

默认情况下，子级在行（水平）和列（垂直）中顺序放置，这是您在随附的屏幕截图中所得到的。如果您只是想将2个圆圈放在“行”的左右两端，则可以使用MainAxisAlignment的{{1}}值，它将空闲空间均匀地放在子级之间。

但是，如果您还想在圆之间画一条线，那么行中将没有剩余空间可以分配，因此spaceBetween将无济于事。相反，您需要的是行之间，圆圈之间的MainAxisAlignment小部件。这将创建一个小部件，该小部件将占据Row（行）中的所有剩余空间。

Expanded

Answer 2

您是将对齐方式指定给容器的项目，而不是容器本身

尝试将对齐方式赋予行

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 个答案: