SwiftUI中如何实现HStack内Image与Text的高度一致对齐

问题描述 #

我需要对齐两个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的顶部和底部实现等高，但每个栈视图仅能应用一个对齐指南，无法实现需求。
• GeometryReader：用GeometryReader包裹HStack，给Text和Image添加.frame(height: proxy.frame.height)修饰符，方案未生效，还在视图周围生成了多余空白。

解决方案 #

方案1：自动等高拉伸（适配任意图标尺寸需求） #

该方案无需手动计算高度，可保证两个子元素的背景高度完全一致，无多余空白，修正后代码如下：

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

  Spacer()
      
  Image(systemName: "checkmark.seal.fill")
    .resizable()
    .scaledToFit()
    .padding()
    .frame(maxHeight: .infinity)
    .background(
      RoundedRectangle(cornerRadius: 10)
        .foregroundColor(.red)
    )
}
.fixedSize(horizontal: false, vertical: true)

实现逻辑：

• 两个子元素添加.frame(maxHeight: .infinity)修饰符，会自动撑满HStack的可用高度
• HStack添加.fixedSize(horizontal: false, vertical: true)修饰符，限定HStack高度仅为容纳内容的最小高度，不会额外拉伸产生空白

方案2：SF Symbol 字号匹配（代码更简洁） #

如果接受图标尺寸与文本字号对齐，可直接给图标设置和文本相同的字体，无需拉伸即可实现固有高度一致：

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

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

内容的提问来源于stack exchange，提问作者ph1psG