SwiftUI中VStack会拉伸内部内容，如何调整其分布实现期望布局？

你遇到的拉伸问题根源是SwiftUI中Shape类型（你用的Capsule属于Shape）默认会填充父视图提供的所有可用空间：你只给竖线Capsule设置了宽度，没有限制高度规则，所以外层VStack分配空间时，会先放下固定尺寸的Circle，剩下的空间全部分给上下两个竖线，导致竖线被拉长。

你可以根据想要的最终效果选择对应的修改方案： #

方案1：实现时间轴竖线撑满条目高度，圆圈对齐文本首行（常见时间轴效果，对应你截图左侧的预期效果） #

修改SingleView的对齐规则和布局优先级即可：

private struct SingleView: View {
    let text: String
    var body: some View {
        // 改为顶部对齐，让圆圈和文本第一行对齐
        HStack(alignment: .top, spacing: 8) {
            VStack(alignment: .center, spacing: 0) {
                Capsule()
                    .frame(width: 2)
                    .foregroundColor(.graphic)
                Circle()
                    .strokeBorder(Color.graphic, lineWidth: 2)
                    .frame(width: 12, height: 12)
                Capsule()
                    .frame(width: 2)
                    .foregroundColor(.graphic)
            }
            // 给文本更高布局优先级，确保文本优先展示，时间轴高度跟随文本高度自适应
            Text(text)
                .body()
                .layoutPriority(1)
        }
    }
}

方案2：上下竖线保持固定长度，不跟随文本高度拉伸 #

直接给上下两个Capsule设置固定高度即可：

private struct SingleView: View {
    let text: String
    var body: some View {
        HStack(alignment: .center) {
            VStack(alignment: .center, spacing: 4) {
                Capsule()
                    .cornerRadius(2)
                    .frame(width: 2, height: 8) // 自定义你需要的固定高度
                    .foregroundColor(.graphic)
                Circle()
                    .strokeBorder(Color.graphic, lineWidth: 2)
                    .frame(width: 12, height: 12)
                Capsule()
                    .cornerRadius(2)
                    .frame(width: 2, height: 8) // 自定义你需要的固定高度
                    .foregroundColor(.graphic)
            }
            Text(text)
                .body()
        }
    }
}

补充：如果你需要整个左侧时间轴区域完全不拉伸，保持内容固有尺寸 #

也可以给左侧的VStack添加.fixedSize()修饰符，它会自动让VStack的大小适配内容的理想尺寸，不会被父视图拉伸：

VStack(alignment: .center, spacing: 4) {
    // 三个时间轴元素
}
.fixedSize()

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