SwiftUI如何实现沿ListView排布、每个列表单元格中点带圆点的竖线效果

直接通过下标判断控制每个单元格的竖线绘制范围即可解决首尾溢出问题，以下是可直接运行的完整代码：

import SwiftUI

struct VerticleLineCircle: View {
    let array: Array<Int> = Array(0...10)
    // 统一配置参数，方便后续调整
    private let lineWidth: CGFloat = 2
    private let dotSize: CGFloat = 10
    private let leftMargin: CGFloat = 15
    
    public var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                ForEach(0..<array.count, id: \.self) { index in
                    HStack(alignment: .top, spacing: 12) {
                        // 左侧竖线+圆点区域
                        ZStack(alignment: .top) {
                            // 绘制对应竖线段
                            Path { path in
                                let centerX = leftMargin
                                // 非第一个元素，绘制圆点上方的线段
                                if index != 0 {
                                    path.move(to: CGPoint(x: centerX, y: 0))
                                    path.addLine(to: CGPoint(x: centerX, y: dotSize/2))
                                }
                                // 非最后一个元素，绘制圆点下方的线段
                                if index != array.count - 1 {
                                    path.move(to: CGPoint(x: centerX, y: dotSize/2))
                                    path.addLine(to: CGPoint(x: centerX, y: UIScreen.main.bounds.height))
                                }
                            }
                            .stroke(Color(UIColor.systemBlue), lineWidth: lineWidth)
                            
                            // 圆点固定在当前区域顶部中点
                            Circle()
                                .fill(Color.blue)
                                .frame(width: dotSize, height: dotSize)
                                .offset(x: leftMargin - dotSize/2, y: 0)
                        }
                        .frame(width: leftMargin * 2)
                        
                        // 右侧自定义内容区域
                        VStack(alignment: .leading, spacing: 8) {
                            Text("Hello, here is some custom view!")
                            // 灰色分割线
                            Rectangle()
                                .fill(Color.gray.opacity(0.8))
                                .frame(height: 0.5)
                        }
                        .padding(.vertical, 16) // 可自行调整单元格上下间距
                    }
                }
            }
            .padding(.horizontal, 16)
        }
    }
}

struct SwiftUIView3_Previews: PreviewProvider {
    static var previews: some View {
        VerticleLineCircle()
    }
}

核心调整说明 #

• 把样式参数统一提取，后续修改竖线宽度、圆点大小、左侧边距直接改参数即可，不需要调整绘制逻辑
• 竖线绘制和当前单元格下标绑定：第一个单元格仅绘制圆点下方的线段，最后一个单元格仅绘制圆点上方的线段，中间单元格绘制上下两段，刚好和圆点衔接没有向外延伸的部分
• 去掉了冗余的自定义线段Shape，直接用原生Rectangle实现分割线，性能更优
• 圆点和竖线的位置完全对齐，不会出现不同尺寸屏幕下的错位问题

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