使用Swiftui中的自定义对齐指南在2个不同的堆栈中对齐视图

Question

我有2个hstack坐在一个Vstack中，如下所示：

我要实现的目标是将标题2和标题4的领先者彼此保持一致。也没有使用框架彼此之间的标题1和标题3。如下：

这是我使用Horizo​​nTalAlignment的代码（为方便起见，我还将预览包含在预览中）：

import SwiftUI

public struct ContentView: View {
    public var body: some View {
        VStack(alignment: .centerHorizontalAlignment, spacing: 10) {
            HStack(alignment: .top, spacing: 16) {
                VStack(alignment: .leading, spacing: 10) {
                    Text("Title 1")
                        .font(.body)
                        .fontWeight(.medium)

                    Text("123456789")
                        .font(.body)
                        .foregroundColor(.black.opacity(0.6))

                }
                .background(Color.green)

                VStack(alignment: .leading, spacing: 10) {
                    Text("Title 2")
                        .font(.body)
                        .fontWeight(.medium)

                    Text("2 lines\nof text")
                        .font(.body)
                        .foregroundColor(.gray)

                }
                .background(Color.red)
                .alignmentGuide(.centerHorizontalAlignment) { $0[HorizontalAlignment.leading] }

            }
            .padding()
            .background(Color.purple)


            HStack(alignment: .top, spacing: 16) {
                VStack(alignment: .leading, spacing: 10) {
                    Text("Title 3")
                        .font(.body)
                        .fontWeight(.medium)


                    Text("Aaaaaaaaaa")
                        .font(.body)
                        .foregroundColor(.black.opacity(0.6))

                    Text("Bbbbbbbbbbbbbbbbbbbb")
                        .font(.body)
                        .foregroundColor(.black.opacity(0.6))
                }
                .background(Color.yellow)

                VStack(alignment: .leading, spacing: 10) {
                    Text("Title 4")
                        .font(.body)
                        .fontWeight(.medium)


                    Text("Cccccccccccc")
                        .font(.body)
                        .foregroundColor(.black.opacity(0.6))
                }
                .background(Color.blue)
                .alignmentGuide(.centerHorizontalAlignment) { $0[HorizontalAlignment.leading] }

            }
            .font(.body)
            .padding()
            .background(Color.gray)


        }
        .padding()
        .frame(alignment: .leading)
        .background(Color.cyan)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension HorizontalAlignment {
    enum CenterHorizontalAlignment: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[HorizontalAlignment.center]
        }
    }

    static let centerHorizontalAlignment = HorizontalAlignment(CenterHorizontalAlignment.self)

}

如果有人可以给我一些有关如何实现此目的的提示或解决方案，则将不胜感激。 我正在使用Xcode 13.3.1和Swift5。PS

文本是完全通用和动态的。因此，不能保证这里总是有1或2行文本。我希望该解决方案足够通用，因此无论内容多长时间，它都可以正常工作。

Answer 1

我认为您想要自定义对齐指南：