Flutter - 如何在两个小部件之间创建一条垂直线

Question

我需要在两个小部件之间创建一条垂直线，如下所示：https://imgur.com/a/22ybF6o

我可以这样做，但要固定大小。如果这个尺寸发生变化，布局就会变得像这样混乱：https://imgur.com/a/kO9NXlJ

这是我的代码：

Widget listItem(TripsData item) {
    var startDate = DateFormat('dd/MM/yy - HH:mm').format(DateTime.parse(item.start));
    var endDate = DateFormat('dd/MM/yy - HH:mm').format(DateTime.parse(item.end));
    return Card(
      child: Stack(
        children: <Widget>[
          drawDestinationLine(Colors.red),
          Column(
            children: <Widget>[
              ListTile(
                leading: drawDestinationCircle('A', Colors.blue),
                title: Text(startDate),
                subtitle: Text(item.locationStart),
              ),
              const Padding(padding: EdgeInsets.only(bottom: 2.0)),
              ListTile(
                leading: drawDestinationCircle('B', Colors.blue),
                title: Text(endDate),
                subtitle: Text(item.locationEnd),
              ),
            ],
          ),
        ],
      ),
    );
  }

有人可以帮我解决这个问题吗？

如果需要更多代码，请告诉我，但 StackOverflow 没有让我在这里放更多代码..

Answer 1

我使用了 timelines 0.1.0 包，这使得这很容易实现

查看pub.dev 和相应的Github repo 以获得很好的示例。

其中一个示例用例看起来像您要查找的内容：

Answer 2

在这种情况下，您应该使用 Stack、Positioned 和 ConstrainedBox 小部件来创建所需的排列。

类似这个伪代码，你需要提供正确的坐标：

Stack ( children: [
   Positioned ( left: 0.0 , top : 0.0 , child:  
     ListTile (leading: drawDestinationCircle('A', Colors.blue),
                title: Text(startDate),
                subtitle: Text(item.locationStart),
              )),
   Positioned ( left: 0.0 , bottom : 0.0 , child:  
     ListTile (leading: drawDestinationCircle('B', Colors.blue),
                  title: Text(endDate),
                  subtitle: Text(item.locationEnd),
                )),
   Positioned ( left 20.0 , top : 20.0 
              , child: ConstrainedBox(
                       constraints: new BoxConstraints(
                              minHeight: 5.0,
                              minWidth: 5.0,
                              maxHeight: 30.0,
                              maxWidth: 5.0,
                              ),
                           child: new DecoratedBox(
                             decoration: new BoxDecoration(color: Colors.red),
                           )
                       ),
              )
          ]);