SwiftUI：如何根据另一个元素的位置对齐元素的填充值

Question

如何对齐 SwiftUI 中 VStack 中包含的两个不同 HStack 中的元素？

这是我正在尝试做的事情 -

VStack {
   HStack {
     element A - Text
     element B - Image 
     element C - Image
   }
   HStack {
     element D - Text
     element E - Text
   }
}

如何根据第一个 HStack 中 'Text element A' 的中心轴对齐第二个 HStack 中的 'Text element D'？

如果我在所有封闭的 VStack 上使用 .center 对齐方式，它会对齐 HStack，但不会对齐各个元素

提前致谢！

编辑 1： @E.coms 根据您的意见，这就是我正在做的

enter code here
import SwiftUI
struct ContentView2: View {

    var body: some View {  

        VStack(alignment: .center) {

            Image(systemName: "photo")
                .padding(.bottom, 10)       

            VStack(alignment: .midNameAndDate) {  

                HStack{
                    Text("Name")
                        .padding(.trailing, 100)
                        .alignmentGuide(.midNameAndDate, computeValue: { v in v[HorizontalAlignment.center] })
                    Image(systemName: "phone")
                        .padding(.trailing, 20)
                    Image(systemName: "location")
                        .padding(.trailing, 40)
                }        

                HStack {

                    Text("Month day, year")
                        .padding(.trailing, 40)
                    Text("00:00 ZM")
                        .padding(.trailing, 40)
                }.alignmentGuide(.midNameAndDate) { v in v[.leading]}

            }
        }
    }
}    

struct ContentView2_Previews: PreviewProvider {
    static var previews: some View {
        ContentView2()
    }
}

extension HorizontalAlignment {
    private enum MidNameAndDate : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[.leading]
        }
    }
    static let midNameAndDate = HorizontalAlignment(MidNameAndDate.self)
}

'''

这就是我的结局

这正是我需要的

我是否应该将它们分别拆分为 HStack 中的 VStack？

另一方面，我可以通过将它们拆分为单独的垂直堆栈来对齐它们（即名称和日期在一个垂直堆栈下，Phone，位置和时间在另一个垂直堆栈下。两个垂直堆栈在水平堆栈下）。但是当我想创建这些元素的列表时，这会变得越来越复杂。

我能够在 WWDC 2019 视频中找到有关在不同水平堆栈中对齐 UIelements 的信息，但没有找到有关在不同垂直堆栈中对齐 UIelements 的信息，至少我希望我没有忽略某些东西！

Answer 1

我向您展示了如下示例：

                         extension HorizontalAlignment {
                            private enum MyAlignment: AlignmentID {
                                static func defaultValue(in d: ViewDimensions) -> CGFloat {
                                    return d[.trailing]
                                }
                            }
                            static let myAlignment = HorizontalAlignment(MyAlignment.self)
                        }



                        VStack(alignment: .myAlignment) {
                           HStack {
                             (element A).alignmentGuide(.myAlignment) { v in  v[HorizontalAlignment.center]}
                             (element B)
                             (element C)
                           }
                           HStack {
                             (element D)
                             (element E)
                            }.alignmentGuide(.myAlignment) { v in v[.leading]}
                        }

在你最近的例子中，它应该像下面这样：

struct ContentView2: View {

var body: some View {

    VStack(alignment: .midNameAndDate) {

        Image(systemName: "photo")
            .padding(.bottom, 10).alignmentGuide(.midNameAndDate) { v in v[HorizontalAlignment.center]}

        VStack(alignment: .midNameAndDate) {

            HStack{
                Text("Name")
                    .padding(.trailing, 100)
                      .alignmentGuide(.midNameAndDate, computeValue: { v in v[HorizontalAlignment.center] + 25 })
                Image(systemName: "phone")
                    .padding(.trailing, 20)
                Image(systemName: "location")
                    .padding(.trailing, 40)
            }

            HStack {

                Text("Month day, year").alignmentGuide(.midNameAndDate) { v in v[.trailing]}
                    .padding(.trailing, 40)
                Text("00:00 ZM")
                    .padding(.trailing, 40)
            }

        }
    }.frame(maxWidth: .infinity, alignment: .trailing)


}
}

您可以想象自定义的水平对齐是视图元素上的一条线。它们应该在相同的位置，具有相同的 midNameAndDate。因为您使用的是任意尾随填充，所以您必须在调整中使用常量。

对于容器，使用框架对齐将整个视图定位在任何superView中。

SwiftUI：如何根据另一个元素的位置对齐元素的填充值

SwifUI: How do I align padding value of an element based on position of another element

xcode

vertical-alignment

ios13

swiftui