swift - 对齐 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)
    )
}

我试过的：

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

它是怎样的：

我想要它：

Answer 1

把你包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 2

您可以Image通过将.frame()修饰符添加到您的HStack. 看下面的代码，

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 3

这里是升级版的抢答答案，支持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)
                
            }
            
        }
        
    }
    
}

结果：