如何绘制垂直链接以连接颤动中的领先图标答案

【问题标题】：How to draw the vertical link to connect the leading icon in flutter如何绘制垂直链接以连接颤动中的领先图标
【发布时间】：2021-07-20 01:24:29
【问题描述】：

我想在 listtile flutter 中的前导图标之间绘制垂直线。我尝试过 VerticalDivider，但我不想要线之间的空间。我想做像下面显示的图像。有人知道怎么做吗？

这是我的代码：

    Widget build(BuildContext context) {
        return ListView(
          children: <Widget>[
            ListTile(
            dense: true,
            title: Text('Name'),
            leading: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  Icons.person,
                  color: Colors.black,
                ),
          
ListTile(
        dense: true,
        title: Text('Name'),
        leading: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.person,
              color: Colors.black,
            ),
      
ListTile(
        dense: true,
        title: Text('Name'),
        leading: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              Icons.person,
              color: Colors.black,
            ),
   
              ],
            ),
          ),
          ],
        )

【问题讨论】：

标签： flutter

【解决方案1】：

试试timelines，会更容易实现：

对于图标指示器，使用 TimelineNode

SizedBox(
height: 80.0,
child: TimelineNode(
indicator: Icon(Icons.people),
startConnector: SolidLineConnector(),
endConnector: SolidLineConnector(),
),
)

【讨论】：

【解决方案2】：

包装图标以堆叠并添加 2 个红色容器以放置在中心顶部和中心底部的位置

【讨论】：

【解决方案3】：

试试timelines包，可以在星星之间画竖线。

SizedBox(
  height: 20.0,
  child: DecoratedLineConnector(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.blue, Colors.lightBlueAccent[100]],
      ),
    ),
  ),
)

【讨论】：