Question

我有一个VStack，其中包含一些HStack，正如您在代码中看到的那样，每个Hstack中都有一个Image和Text，在运行我的代码后，所有代码的Alignmet都很丑陋，我想将Image对齐中心放在一起，文本对齐方式领先。我该如何解决这个问题？我可以使所有Image.center对齐，也可以使所有Text.lead对齐。但是我不能使两者同时发生。

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

由于某些SF符号大于其他SF符号，因此必须给图像添加边框，还应尝试创建可重复使用的视图。

尝试这样的事情：

struct ContentView: View {
    var body: some View {
        VStack {
            RowView(title: "Some texts here.", image: "folder")
            
            RowView(title: "Some texts here.", image: "person.fill.questionmark")
            
            RowView(title: "Some texts here.", image: "snow")
            
            RowView(title: "Some texts here.", image: "forward.end.alt.fill")
        }
        .padding()
        
        Spacer()
    }
}

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

struct RowView: View {
    let title: String
    let image: String
    
    var body: some View {
        // Option 1 with Label
//        Label(
//            title: {
//                Text(title)
//            },
//            icon: {
//                Image(systemName: image)
//                    .frame(width: 30, height: 30)
//            }
//        )
        // Option 2 with HStack
        HStack {
            Image(systemName: image)
                .frame(width: 30, height: 30)
            Text(title)
            Spacer()
        }
    }
}

Answer 2

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

关于您对使用固定框架的评论，here是一篇文章，解释了框架在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)
}

Answer 3

您要使其复杂化。您不需要将所有这些自定义对齐方式和约束用于这种简单的操作。

回到基础知识，使用常规的VStack / HStack并将图标设置为精确的框架。出现此问题是因为图标的宽度稍有不同。

struct TestView: View {
    var body: some View {

        VStack(alignment: .leading) {
            HStack {
                Image(systemName: "folder")
                    .frame(width: 30, height: 30, alignment: .center)
                Text("Some text here")
            }
            
            HStack {
                Image(systemName: "person.fill.questionmark")
                    .frame(width: 30, height: 30, alignment: .center)

                Text("Some text here")
            }
            
            HStack {
                Image(systemName: "snow")
                    .frame(width: 30, height: 30, alignment: .center)

                Text("Some text here")
            }
            
            HStack {
                Image(systemName: "music.note")
                    .frame(width: 30, height: 30, alignment: .center)

                Text("Some text here")
            }
        }
    }
}

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

3 个答案: