SwiftUI如何实现VStack中Text与图片顶部对齐、Divider与图片底部对齐

解决方案 #

你可以通过固定右侧VStack高度与图片等高+底部分割线放在overlay层的方式实现需求，既不会占用文字内容的展示空间，也不需要使用Spacer：

1. 外层HStack设置对齐方式为top，直接让Text("Headline")和图片顶部默认对齐
2. 右侧VStack设置maxHeight: .infinity，自动撑满和左侧图片相同的高度，内部内容保持顶部对齐
3. Divider()放在VStack的底部overlay层，固定在VStack底部和图片底部齐平，完全不占用文字布局空间

完整实现代码如下：

HStack(alignment: .top, spacing: 16) {
    Image("temp 1")
        .resizable()
        .frame(width: 120, height: 120)
        
    VStack(alignment: .leading, spacing: 4) {
        Text("Headline")
            .font(.title2)
            .fontWeight(.semibold)

        Text("Subheadline")
            .font(.subheadline)
            .foregroundColor(.secondary)
        Text("Add info: This Divider should be on bottom of Vstack")
            .font(.subheadline)
            .fontWeight(.regular)
    }
    .frame(maxHeight: .infinity, alignment: .top)
    .overlay(alignment: .bottom) {
        Divider()
    }
}
.padding(16)

如果需要兼容iOS 15以下不支持overlay带alignment参数的版本，可以替换overlay部分为如下写法：

.background(
    VStack {
        Spacer()
        Divider()
    }
)

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