SwiftUI实现时间线列表时如何让竖线矩形随单元格高度自适应消除间隙

现有实现的核心瓶颈不是不会获取单元格高度，而是布局结构的设计问题：给左侧时间线容器加了固定高度约束、把连续竖线拆成多段硬编码高度的独立矩形，导致竖线无法跟随右侧内容的高度变化自适应。

竖线随单元格高度动态延伸的实现方法 #

完全不需要主动计算、读取单元格的实际高度，利用SwiftUI自适应布局能力就能实现无缝效果，调整两个核心点即可：

• 解除左侧时间线容器的固定高度约束
  原实现中给时间线VStack加了.frame(width: 32, height: 80, alignment: .center)，直接把容器锁死在80px高度，不管右侧文本、标签把单元格撑到多高，左侧时间线都不会跟着伸长。只需要保留宽度约束，删掉固定高度配置：.frame(width: 32)，让容器高度完全跟随父级单元格的高度自动匹配。
• 重构竖线的绘制逻辑
  不需要把竖线拆成“节点上方、节点下方”两段独立的、固定高度的Rectangle，直接用ZStack叠两层内容：
• 第一层：通高的竖线矩形，只指定宽度不设高度，自然会撑满整个左侧容器的高度
• 第二层：把节点Circle、图标组件按照需要的垂直位置叠在竖线上，用padding或者对齐参数控制节点位置，不需要手动计算竖线每段需要多长

调整后的核心布局代码参考：

HStack(alignment: .top, spacing: 0) {
    // 左侧时间线区域：只固定宽度，高度自适应
    ZStack(alignment: .top) {
        // 通高竖线，自动匹配整个单元格高度
        Rectangle()
            .frame(width: 1)
            .foregroundColor(.green)
        
        // 里程碑节点
        Circle()
            .strokeBorder(Color.green, lineWidth: 2)
            .frame(width: 30, height: 30)
            .background(Color.white)
            .overlay(
                Image(systemName: "gear")
                    .foregroundColor(.gray)
            )
            .padding(.top, 20) // 调整节点在竖线上的垂直位置
    }
    .frame(width: 32)

    // 右侧内容区域：保留原有文本、标签组件不变
    VStack(alignment: .leading, spacing: 8) {
        Text("Dummy operation text that will be in the top of the cell")
            .font(.subheadline)
            .lineLimit(1)
        Label {
            Text("March 6, 2021")
                .font(.caption2)
        } icon: {
            Image(systemName: "calendar.badge.clock")
        }
        // 原有标签组件逻辑不变
    }
}
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))

补充说明：之前尝试用.infinity调整尺寸没生效，本质是因为外层VStack被固定高度锁死，就算单个Rectangle设置了无限大高度，也会被外层容器的边界裁剪，根本触达不到真实的单元格高度。

更优的纵向里程碑时间线实现参考 #

除了调整单单元格的布局，还可以从结构上优化连续性体验：

• 把时间线的连续性从单单元格层级，上移到列表层级实现：用ZStack在List的固定左侧位置叠一根全局垂直竖线，每个单元格的节点图标直接叠在这根全局竖线上，完全避免单元格高度变化导致的竖线断裂问题
• 做边界自动处理：识别列表第一个、最后一个节点，自动隐藏第一个节点上方、最后一个节点下方的竖线段，避免时间线伸到列表的上下边缘外
• 封装可复用节点组件：把不同状态的节点（已完成、进行中、待开始）封装成独立View，支持自定义节点大小、图标、竖线颜色，避免每个单元格重复写几何图形的拼接逻辑
• 区分竖线的状态色：比如已完成里程碑的竖线段用深绿色、进行中的节点下方竖线用半透灰色、待开始的节点段用浅灰色，进一步提升信息层级

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