SwiftUI：对齐不同 HStack 中的视图？

Question

对于列表视图中使用的每个单元格，我有以下视图......：

var body: some View {

    VStack {
        
        HStack {
            Text("item: \(item.name)")
            Text("Some text")
            Spacer()
        }
        
        HStack {
            Image(systemName: "squareshape.fill")
                .resizable()
                .frame(width: 30, height: 30)
            
            Spacer()
        }
        
    }

}

看起来像这样：

我想将黑色方块与Some text之前的 HStack 中找到的前缘对齐。为了清晰起见，我对图像进行了注释，以直观地显示黑色方块应该落在的位置。

我已经看过几个类似的问题，其中可能有解决方案，但我还无法将我所看到的内容应用到我的需求中。我相信我需要使用对齐指南，但是，我不确定如何实际应用此类更改。

我想我可以以不同的方式打破布局，我可以使用 VStack 等...但是，我想知道如何告诉一个视图在这种情况下跨 HStack 与另一个视图对齐...

我怎样才能完成所概述的内容？

Answer 1

这是可能方法的演示 - 基于自定义对齐指南，即。将相同的自定义对齐指南应用于不同的视图使它们与该指南对齐/按该指南对齐。HStack（实际上，对于这种情况，您不需要第二个）。

使用 Xcode 12.5 / iOS 14.5 进行测试

struct ContentView: View {
    var body: some View {
        List(0..<10) {
            RowView(item: $0)
        }
    }
}

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

struct RowView: View {
    let item: Int
    var body: some View {

        VStack(alignment: .myLeading) {
            HStack {
                Text("item: \(item)")
                Text("Some text")
                    .alignmentGuide(.myLeading) { $0[.leading] } // << here !!
                Spacer()
            }
            Image(systemName: "squareshape.fill")
                .resizable()
                .frame(width: 30, height: 30)
                .alignmentGuide(.myLeading) { $0[.leading] } // << here !!
        }
    }
}