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

在这种情况下，您应该使用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),
                           )
                       ),
              )
          ]);

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

1 个答案: