SwiftUI：标签与图片的动态布局调整实现需求

可以通过 HStack 配合对齐设置，结合动态高度变量来实现你要的效果，以下是完整代码示例：

import SwiftUI

struct ContentView: View {
    // 动态控制图片高度的变量
    @State private var dynamicImageHeight: CGFloat = 150
    
    // 模拟第一个标签的内容，可修改测试效果
    let firstLabelText = "这是第一个标签，内容多少会影响第二个标签的位置"
    let secondLabelText = "这是第二个标签，会根据第一个标签的高度自动调整位置"
    
    var body: some View {
        HStack(alignment: .top, spacing: 16) {
            // 动态高度的图片，顶部与第一个标签对齐
            Image(systemName: "photo")
                .resizable()
                .scaledToFit()
                .frame(height: dynamicImageHeight)
                .background(Color.gray.opacity(0.2))
            
            // 垂直排列的标签容器
            VStack(alignment: .leading, spacing: 8) {
                Text(firstLabelText)
                    .font(.headline)
                    .background(Color.yellow.opacity(0.2))
                
                Text(secondLabelText)
                    .font(.subheadline)
                    .background(Color.green.opacity(0.2))
            }
        }
        .padding()
        // 可选：添加调整图片高度的控件，测试动态效果
        .toolbar {
            Slider(value: $dynamicImageHeight, in: 50...300)
                .frame(width: 200)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键实现点说明： #

• 顶部对齐：HStack 设置 alignment: .top，确保图片和文本容器的顶部完全对齐，自然也就和第一个标签顶部对齐。
• 标签自动调整：VStack 内部的两个标签会根据第一个标签的内容高度自动排列——第一个标签内容少的时候，第二个标签自动上移；内容多的时候，第二个标签会被挤到下方。
• 动态图片高度：通过 @State 变量 dynamicImageHeight 控制图片的 frame(height:)，配合滑块可以实时调整图片高度，验证布局稳定性。

你可以根据需求替换 Image(systemName:) 为实际网络图片或本地图片，调整 spacing 数值来控制元素间的间距。

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