SwiftUI中HStack内如何实现图片与多行文本顶部对齐

问题场景 #

在SwiftUI的HStack容器中配置图片顶部对齐时，当HStack内文本为多行，图片会自动居中显示，无法与文本顶部对齐。
原有问题代码：

var infoView: some View {
    VStack(alignment: .leading, spacing: 16) {
        HStack(alignment: .top) {
            Image("rocket")
                .frame(alignment: .top)
            Text("pqosejfr")
                .font(.body).fontWeight(.bold)
        }
        
        HStack {
            Image("bank")
            Text("qwoijqoiwjoijweijqwoiejqoiwjefoiqwjefoiqjwefijqwoiejfqoiwjefoiqwjefpoiqjweoifjqpwoiejfpqoiwejfoiqwejfoiqjwefpoiqjwepoifjqpwoiejfqpoiwejfpoqiwejfpoiqwjefpoiqwjefpoiqjweofijqwepoifjpqwoiejfoij")
                .font(.body).fontWeight(.bold)
        }
    }
}

原有运行效果：

问题原因 #

第二个承载多行文本的HStack没有显式设置对齐属性，HStack默认的垂直对齐规则为.center，因此内部所有子视图都会沿容器垂直中线排布。给Image单独添加的.frame(alignment: .top)仅能控制图片内容在自身布局框架内的位置，无法突破父容器的对齐约束，因此不会生效。

修复方法 #

给第二个HStack显式添加alignment: .top参数即可，无需给Image单独添加多余的frame对齐修饰符。
修正后可正常运行的代码：

var infoView: some View {
    VStack(alignment: .leading, spacing: 16) {
        HStack(alignment: .top) {
            Image("rocket")
            Text("pqosejfr")
                .font(.body).fontWeight(.bold)
        }
        
        // 为HStack指定顶部对齐规则
        HStack(alignment: .top) {
            Image("bank")
            Text("qwoijqoiwjoijweijqwoiejqoiwjefoiqwjefoiqjwefijqwoiejfqoiwjefoiqwjefpoiqjweoifjqpwoiejfpqoiwejfoiqwejfoiqjwefpoiqjwepoifjqpwoiejfqpoiwejfpoqiwejfpoiqwjefpoiqwjefpoiqjweofijqwepoifjpqwoiejfoij")
                .font(.body).fontWeight(.bold)
        }
    }
}

可选优化：如果需要让文本首行的基线和图片顶部对齐，而非文本视图的顶部边缘对齐，可以将HStack的对齐参数替换为.firstTextBaseline，根据实际UI需求选择即可。

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