SwiftUI中如何实现图片与文本的正确对齐？

问题根因 #

• 图片拉伸：Image调用resizable()后未指定内容适配模式，系统默认会拉伸图片填满设置的宽高frame，破坏原图比例。
• 图文错位：HStack使用.center对齐规则时是按视图几何中心对齐，而文本的视觉重心在首行基线位置，和图片中心对齐会产生明显的视觉偏移。

修改方案 #

调整后代码如下：

struct CustomView: View {
    var imageName: String = ""
    var text: String = ""
    var body: some View {
        // 对齐方式改为首行文本基线对齐
        HStack(alignment: .firstTextBaseline, spacing: 5){
            Image(imageName)
                .resizable()
                // 保持原图比例缩放，避免拉伸变形
                .scaledToFit()
                .frame(width: 50, height: 30)
            Text(text)
                .font(.system(size: 10, weight: .light, design: .default))
                .foregroundColor(.white)
                .frame(width: 60)
        }
    }
}

如果调整后仍有轻微视觉对齐偏差，可给Image添加对齐引导微调位置，示例如下：

Image(imageName)
    .resizable()
    .scaledToFit()
    .frame(width: 50, height: 30)
    // 0.9为示例值，可根据实际图片的视觉重心调整
    .alignmentGuide(.firstTextBaseline) { $0.height * 0.9 }

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