如何在 SwiftUI 中将不同视图中的两个元素与前缘对齐？

Question

我有这个定制单元。我尝试了不同的方法来对齐“技能范围”和“时间”，方法是将 .alignmentGuide(.leading) 添加到“技能范围”和“时间”，但似乎不起作用。 如何将“技能范围”和“时间”从相同的引导点开始对齐？如何将“技能范围”前沿与“时间”前沿对齐？

我已经解决了多个与此相关的问题。但没有运气！如果有人能帮助我，那就太好了！

struct MatchInfoCell: View {
    // MARK: - Variables
    var matchListModel: MatchListModel
    var acceptButtonTitle: String? = "Accept Match"
    var acceptButtonAction: (()->Void)?
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(spacing: 32) {
                VStack(alignment: .leading) {
                    // MARK: - Singles/Doubles
                    Text("Match Type")
                        .robotoRegularFont(size: 10)
                        .foregroundColor(Color.custom333333Color.opacity(0.5))
                    Text(self.matchListModel.singlesDoubles == "1" ? "Singles" : "Doubles")
                        .robotoMediumFont(size: 10)
                        .foregroundColor(Color.custom333333Color)
                }
                VStack(alignment: .leading) {
                    // MARK: - Skill Range
                    Text("Skill Range")
                        .robotoRegularFont(size: 10)
                        .foregroundColor(Color.custom333333Color.opacity(0.5))
                    Text("\(self.matchListModel.skillRangeMin) - \(self.matchListModel.skillRangeMax)")
                        .robotoMediumFont(size: 10)
                        .foregroundColor(Color.custom333333Color)
                }
                
                VStack(alignment: .leading) {
                    // MARK: - No of Participants
                    Text("Players")
                        .robotoRegularFont(size: 10)
                        .foregroundColor(Color.custom333333Color.opacity(0.5))
                    let combinedNames = self.matchListModel.nameOfParticipants
                        .filter { $0.firstName != "" && $0.lastName != "" }
                        .compactMap { "\($0.firstName) \($0.lastName.first ?? "a")" }
                    let str = combinedNames.joined(separator: ", ")
                    Text(str)
                        .robotoMediumFont(size: 10)
                        .foregroundColor(Color.custom333333Color)
                }
                .padding(.trailing)
            }
            VStack {
                HStack(spacing: 32) {
                    VStack(alignment: .leading) {
                        let dateStr = UtilityMethods.convertTimestampToDate(timestamp: TimeInterval(self.matchListModel.dateTime), format: E_D_MMM_YY)
                        // MARK: - Date
                        Text("Date:")
                            .robotoRegularFont(size: 10)
                            .foregroundColor(Color.custom333333Color.opacity(0.5))
                        Text(dateStr)
                            .robotoMediumFont(size: 10)
                            .foregroundColor(Color.custom333333Color)
                    }
                    
                    VStack(alignment: .leading) {
                        let timeStr = UtilityMethods.convertTimestampToDate(timestamp: TimeInterval(self.matchListModel.dateTime), format: HH_MM_A)
                        // MARK: - Time
                        Text("Time:")
                            .robotoRegularFont(size: 10)
                            .foregroundColor(Color.custom333333Color.opacity(0.5))
                        Text(timeStr)
                            .robotoMediumFont(size: 10)
                            .foregroundColor(Color.custom333333Color)
                    }
                }
            }
            Line()
                .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
                .foregroundColor(Color.customCECECEColor)
                .frame(height: 1)
            
            HStack(spacing: 5) {
                // MARK: - Court
                Text("Court:")
                    .robotoRegularFont(size: 10)
                    .foregroundColor(Color.custom333333Color.opacity(0.5))
                Text(self.matchListModel.homeCourt)
                    .robotoMediumFont(size: 12)
                    .foregroundColor(Color.custom333333Color)
            }
            HStack {
                Spacer()
                
                // MARK: - Button Accept Match
                Button {
                    self.acceptButtonAction?()
                } label: {
                    Text(self.acceptButtonTitle ?? "")
                        .robotoMediumFont(size: 10)
                        .foregroundColor(.white)
                        .frame(width: 88, height: 30)
                        .background(Color.custom64B054Color)
                        .cornerRadius(5)
                }
            }
        }
        .padding(.all, 10)
        .frame(maxWidth: .infinity)
        .overlay(
            RoundedRectangle(cornerRadius: 9)
                .stroke(Color.custom64B054Color, lineWidth: 1)
        )
        .background(
            RoundedRectangle(
                cornerRadius: 9
            )
            .foregroundColor(Color.white)
            .shadow(
                color: Color.black.opacity(0.25),
                radius: 9,
                x: 0,
                y: 0
            )
        )
    }
}

Answer 1

带有详细信息的

VStack

仅包含标签和值。这些对已正确对齐 - 可以看到标签和值是前导对齐的。

为了将第二行中的条目与第一行中的条目对齐，我建议重新组织堆栈：

而不是 1

VStack

包含 2

HStack

使用包含 3 个

HStack

 的 

VStack

VStack(alignment: .leading, spacing: 12) {
    HStack(alignment: .top, spacing: 32) {
        VStack(alignment: .leading, spacing: 12) {
            VStack(alignment: .leading) {
                // MARK: - Singles/Doubles
            }

            VStack(alignment: .leading) {
                // MARK: - Date
            }
        }

        VStack(alignment: .leading, spacing: 12) {
            VStack(alignment: .leading) {
                // MARK: - Skill Range
            }

            VStack(alignment: .leading) {
                // MARK: - Time
            }
        }

        VStack(alignment: .leading) {
            // MARK: - No of Participants
        }
    }
    Line()
    // content below line
}