Swiftui 使用自定义路线的正确方法指南

所以我的问题是，我正在尝试对齐来自不同hstack的文本。不同大小的SF符号导致此问题

我知道AlignmentGuide可以解决我的问题，但我不确定如何实施。如果有人能提供任何见解，我将不胜感激

我看了这部电影

这是与这个问题相关的主屏幕

然而，我需要一点澄清，把它放在一起

这是相关代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("SOS Mayday!").bold()
                .font(.largeTitle)
                
            Rectangle()
                .frame(height: 1)
            HStack {
                Image(systemName: "textformat.abc").imageScale(.large)
                Text("Trying to figure out how to use alignment guide").bold()
            }.padding(.vertical)
            
            HStack {
                //MARK:- FIX ALIGNMENT
                Image(systemName: "aqi.low").imageScale(.large)
                Text("This text should align with the text above").bold()
            }
            Spacer()
        }.padding(.horizontal)
    }
}

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

---

我能够使用以下步骤生成您想要的输出：

基于AlignmentID和 它的静态实例，如链接的幻灯片所示

仅在要自定义对齐的零件周围添加新的VStack。否则会影响其他零部件的对齐

在要在其位置对齐的两个文本上添加alignmentGuide（） 前沿

以下是更新的代码：

extension HorizontalAlignment {
    private enum LeadingAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            return context[.leading]
        }
    }

    static let leadingAlign = HorizontalAlignment(LeadingAlignment.self)
}

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("SOS Mayday!").bold()
                .font(.largeTitle)

            Rectangle()
                .frame(height: 1)

            // The new VStack using the custom alignment.
            VStack(alignment: .leadingAlign) {
                HStack {
                    Image(systemName: "textformat.abc").imageScale(.large)
                    Text("Trying to figure out how to use alignment guide")
                        .bold()
                        .alignmentGuide(.leadingAlign) { d in
                            d[.leading]
                        }
                }.padding(.vertical)

                HStack {
                    //MARK:- FIX ALIGNMENT
                    Image(systemName: "aqi.low").imageScale(.large)
                    Text("This text should align with the text above")
                        .bold()
                        .alignmentGuide(.leadingAlign) { d in
                            d[.leading]
                        }
                }
                Spacer()
            }
        }.padding(.horizontal)
    }
}

---

对不起，我忘了在开头添加代码