对齐 HStack 成员的高度

Question

我想对齐两个 HStack 成员的高度。预期的结果是图像与文本具有相同的大小。当前的结果是图像的高度比文本高。这是我当前的设置：

HStack {
  Text("Sample")
    .font(.largeTitle)
    .padding()
    .background(
      RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)
    )

  Spacer()
      
  Image(systemName: "checkmark.seal.fill")
    .resizable()
    .scaledToFit()
    .padding()
    .background(
      RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)
    )
}

我试过的：

.fixedSize() -> 我试图将此修饰符附加到 Image 上，但结果是 Image 的高度小于文本的高度。可能是因为 SFSymbol 的固有高度小于 .largeTitle 固有高度。
AlignmentGuide -> 我试图创建一个自定义对齐指南，我最初认为我可以说“对齐 Image 和 Text 的底部并对齐 [=13= 的顶部] 和 Text”，因此具有相同的高度。但似乎每个堆栈视图只能应用一个对齐指南。
GeometryReader -> 我试图将 HStack 包装在 GeometryReader 中，我在文本和图像上添加了 .frame(height: proxy.frame.height) 视图修饰符。这也无济于事，因为它只是在视图周围制造了一些白色 space。

怎么样：

我多么想要：

Answer 1

您可以通过向 HStack 添加 .frame() 修饰符来减小 Image 的大小。看下面的代码，

HStack {
    // Some Content
}
.frame(height: 60) // Interchangeable with frame(maxHeight: 60)

结果：

对于您的确切示例，我发现 60 是最佳选择。但如果您想要一个更动态的解决方案，我会对您的代码进行一些更改。请参阅下面的代码。

HStack {
    Text("Sample")
        .font(.largeTitle)
        .frame(maxHeight: .infinity) // force the text to take whatever height given to the Parent View, which is the HStack
        .padding(.horizontal) // Add padding to the Text to the horizontal axis
        .background(
            RoundedRectangle(cornerRadius: 10)
                .foregroundColor(.red)
        )

    Spacer()

    Image(systemName: "checkmark.seal.fill")
        .resizable()
        .scaledToFit()
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 10)
                .foregroundColor(.red)
        )
}
.background(Color.gray)
.frame(height: 100) // Change this value and the embedded Views will fit dynamically

输出将如下面的 GIF 所示，

Answer 2

将您的 Image 包裹在 Text 中。由于您的图像来自 SF Symbols，SwiftUI 将缩放它以匹配动态类型大小。（我不确定它将如何缩放其他图像。）

VStack {
    let background = RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)

    ForEach(Font.TextStyle.allCases, id: \.self) { style in
        HStack {
            Text("\(style)" as String)
                .padding()
                .background(background)

            Spacer()

            Text(Image(systemName: "checkmark.seal.fill"))
                .padding()
                .background(background)
        }
        .font(.system(style))
    }
}

Answer 3

这里是rob answer升级版，支持Assets Image加系统Image！几乎任何图像！像这样：

struct ContentView: View {
    
    var body: some View {
        
        VStack {
            
            ForEach(Font.TextStyle.allCases, id: \.self) { style in
                
                HStack {
                    
                    Text(String(describing: style))
                        .padding()
                        .background(Color.pink.opacity(0.5).cornerRadius(10.0))
                    
                    Spacer()
                    
                }
                .font(.system(style))
                .background(
                    
                    Image("swiftPunk")
                        .resizable()
                        .scaledToFit()
                        .padding()
                        .background(Color.yellow.cornerRadius(10.0))
                    
                    , alignment: .trailing)
                
            }
            
        }
        
    }
    
}

对齐 HStack 成员的高度

Align heights of HStack members

swift

swiftui

hstack

结果：