SwiftUI VStack自定义对齐指南与其他视图兼容问题

要实现你想要的对齐效果，核心是让VStack内的所有元素（Event和Divider）都基于同一个自定义对齐基准对齐，而不是只给Event里的文本设置对齐指南。以下是简洁的实现方式：

1. 保留自定义对齐指南定义 #

你的HorizontalAlignment扩展无需修改，继续使用：

extension HorizontalAlignment {
    struct EventLeading: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[HorizontalAlignment.leading]
        }
    }

    static let eventLeading = HorizontalAlignment(EventLeading.self)
}

2. 修正Event视图的对齐指南 #

把对齐指南绑定到整个Event容器上，让它的eventLeading基准指向内部event文本的leading位置：

struct Event: View {
    let date: String
    let event: String
    
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Text(date)
                .font(.caption)
            Text(event)
                .alignmentGuide(.eventLeading) { $0[.leading] }
        }
        // 让整个Event视图的eventLeading基准和内部文本的对齐基准一致
        .alignmentGuide(.eventLeading) { $0[.eventLeading] }
    }
}

3. 给Divider添加对齐指南 #

让Divider也遵循同一个eventLeading对齐基准，确保它和Event的对齐位置一致：

// 可以封装成复用组件，也可以直接在使用时添加修饰符
struct AlignedDivider: View {
    var body: some View {
        Divider()
            .alignmentGuide(.eventLeading) { $0[.leading] }
    }
}

4. VStack使用自定义对齐 #

最后在VStack中指定水平对齐为eventLeading，所有子元素都会基于这个基准对齐：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .eventLeading, spacing: 8) {
            Event(date: "10:00", event: "团队会议")
            AlignedDivider()
            Event(date: "14:30", event: "项目评审")
            AlignedDivider()
            Event(date: "16:00", event: "客户沟通")
        }
        .padding()
    }
}

为什么之前的尝试失败？ #

你之前给Event添加maxWidth: .infinity的frame时，单个Event的eventLeading是相对于自身容器的，所以会对齐到容器leading边缘。现在的方式是让整个VStack的对齐基准统一指向Event内部文本的leading，同时让Divider也对齐到这个位置，就能实现所有元素的整齐对齐。

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