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

我使用了 package時間線 0.1.0這使得這很容易成為可能

檢查pub.dev和相應的Github 回購以獲得很好的例子。

示例用例之一看起來像您正在尋找的：

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),
                           )
                       ),
              )
          ]);