flutter - 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 没有让我在这里放更多代码..

标签： flutterflutter-layout

Answer 1

我使用了包时间线 0.1.0这使得这很容易

检查pub.dev和相应的Github存储库以获得很好的示例。

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