Flutter中如何实现ListTile前置图标间的无间隙连接竖线

使用VerticalDivider出现多余间距，是因为该组件自带默认的上下内边距，且每个ListTile的独立布局会让竖线被组件自身的padding截断，无法形成连续效果。解决时需要完全自定义竖线的绘制位置、尺寸，消除组件自带的冗余间距，统一对齐所有列表项的位置。

关键调整点 #

• 修正原有代码的结构错误：原代码中三个ListTile被错误嵌套在第一个ListTile的Row组件内部，未正确放置在ListView的children数组中，运行时会抛出布局异常
• 用定宽定高的Container绘制竖线，替代有默认冗余间距的VerticalDivider
• 固定所有ListTile的minLeadingWidth和leading组件尺寸，保证每段竖线的水平位置完全对齐
• 将ListTile的垂直方向contentPadding设为0，让相邻列表项的竖线上下边缘完全衔接
• 把图标层叠在竖线之上，实现纵轴时间线的视觉效果

完整可运行示例代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(
      padding: EdgeInsets.zero,
      children: [
        // 前N个列表项，竖线从顶部连续到底部
        for (int i = 0; i < 4; i++)
          ListTile(
            dense: true,
            // 自定义内边距，垂直方向无冗余间距
            contentPadding: const EdgeInsets.symmetric(horizontal: 16),
            // 固定leading区域最小宽度，保证所有项位置对齐
            minLeadingWidth: 40,
            leading: SizedBox(
              width: 40,
              child: Stack(
                alignment: Alignment.centerLeft,
                children: [
                  // 无间距竖线，从组件顶部延伸到底部
                  Positioned(
                    left: 12, // 按视觉需求调整竖线的水平位置
                    top: 0,
                    bottom: 0,
                    child: Container(
                      width: 2, // 自定义竖线粗细
                      color: Colors.grey.shade300,
                    ),
                  ),
                  // 前置图标，叠在竖线上层
                  const Icon(
                    Icons.person,
                    color: Colors.black,
                    size: 24,
                  ),
                ],
              ),
            ),
            title: const Text('列表项名称'),
          ),
        // 最后一个列表项，竖线在图标位置断开
        ListTile(
          dense: true,
          contentPadding: const EdgeInsets.symmetric(horizontal: 16),
          minLeadingWidth: 40,
          leading: SizedBox(
            width: 40,
            child: Stack(
              alignment: Alignment.centerLeft,
              children: [
                Positioned(
                  left: 12,
                  top: 0,
                  // 让竖线停在图标垂直中心位置，实现断连效果
                  bottom: 12,
                  child: Container(
                    width: 2,
                    color: Colors.grey.shade300,
                  ),
                ),
                const Icon(
                  Icons.person,
                  color: Colors.black,
                  size: 24,
                ),
              ],
            ),
          ),
          title: const Text('最后一个列表项'),
        ),
      ],
    ),
  );
}

效果说明 #

• 整个竖线没有VerticalDivider自带的预留间距，完全贴合相邻图标的垂直位置
• 最后一项的竖线自动在图标中心位置断开，匹配时间线类列表的视觉效果
• 所有图标水平居中对齐在竖线的衔接位置，不会出现水平偏移

内容的提问来源于stack exchange，提问作者qing。