编辑：我们如何在 SwiftUI 中将图像与图像和文本与文本对齐，多重对齐？

Question

我有一个VStack，其中有一些HStack，正如您在我的代码中看到的那样，在我的每个Hstack内都有一个图像和文本，运行我的代码后，所有代码的对齐方式很难看，我希望图像对齐中心在一起，文本对齐领先。我该如何解决这个问题？我可以使所有图像.center对齐，也可以使所有文本.leading对齐。但我不能让两者同时发生。

struct CustomAlignment: AlignmentID
{
    static func defaultValue(in context: ViewDimensions) -> CGFloat
    {
        return context[HorizontalAlignment.center]
    }
}


struct CustomAlignment2: AlignmentID
{
    static func defaultValue(in context: ViewDimensions) -> CGFloat
    {
        return context[HorizontalAlignment.leading]
    }
}



extension HorizontalAlignment
{
    static let custom: HorizontalAlignment = HorizontalAlignment(CustomAlignment.self)
    static let custom2: HorizontalAlignment = HorizontalAlignment(CustomAlignment2.self)
}




import SwiftUI

struct ContentView: View {
    var body: some View {
    
    

    
    
    VStack(alignment: .custom)
    {
        

        HStack()
        {
            Image(systemName: "folder")
                .alignmentGuide(.custom) { $0[HorizontalAlignment.center] }
            Text("Some texts here.")
                .alignmentGuide(.custom2) { $0[HorizontalAlignment.leading] }
            Spacer()
        }
            


        HStack()
        {
            Image(systemName: "music.note")
                .alignmentGuide(.custom) { $0[HorizontalAlignment.center] }
            Text("Some texts here.")
                .alignmentGuide(.custom2) { $0[HorizontalAlignment.leading] }
            Spacer()
        }
      


        HStack()
        {
            Image(systemName: "person.fill.questionmark")
                .alignmentGuide(.custom) { $0[HorizontalAlignment.center] }
            Text("Some texts here.")
                .alignmentGuide(.custom2) { $0[HorizontalAlignment.leading] }
            Spacer()
        }
     
        
        
    }
    .padding()
    
    
    
    Spacer()
    
    
    
}

}

Answer 1

如果您想要精确控制，请使用自定义对齐指南。

关于您对使用固定框架的评论，这里有一篇文章解释了框架如何在 SwiftUI 中工作。基本上，在这种情况下，帧修改器只是在 SF 周围添加一个固定大小的帧，但它不会改变固有大小。

struct ContentView: View {
    var body: some View {
        VStack(alignment: .sfView) {
            SFView(title: "This is some text", image: "folder")
            SFView(title: "SwiftUI is cool. Combine is cooler.", image: "snow")
            SFView(title: "This is a music note. This has a different length.", image: "music.note")
        }
    }
}

private struct SFView: View {
    let title: String
    let image: String
    var body: some View {
        HStack(spacing: 8) {
            Image(systemName: image)
                .font(.system(size: 20))
                .frame(width: 32, height: 32)
                .alignmentGuide(.sfView) { d in d[HorizontalAlignment.center] }
            Text(title)
                .alignmentGuide(.sfView) { d in d[HorizontalAlignment.leading] }
        }
    }
}

private extension HorizontalAlignment {
    struct SFViewAlignment: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[HorizontalAlignment.leading]
        }
    }
    static let sfView = HorizontalAlignment(SFViewAlignment.self)
}