SwiftUI中ZStack内视图垂直位置的动态布局方案求助

核心思路是通过GeometryReader + PreferenceKey动态获取红色背景和头像的尺寸，替代静态的offset值，确保头像始终一半在红色背景上方、一半在下方，不受固定尺寸限制。

方案一：针对固定头像高度的简化实现 #

如果头像尺寸固定，只需获取红色背景的高度，将内容视图的偏移量设为背景高度的一半即可：

struct ProfileView: View {
    var body: some View {
        ZStack(alignment: .top) {
            // 外层容器边框
            Rectangle()
                .foregroundColor(.clear)
                .frame(width: 249, height: 291)
                .overlay(RoundedRectangle(cornerRadius: 0).stroke(.gray, lineWidth: 1))
            
            GeometryReader { bgGeo in
                // 顶部红色背景
                Rectangle()
                    .frame(width: 243, height: 85)
                    .foregroundColor(.red)
                    .padding([.leading, .trailing, .top], 3)
                
                // 头像及下方信息区域
                VStack(alignment: .center, spacing: 12) {
                    VStack(alignment: .center, spacing: 12) {
                        Image(systemName: "person.crop.circle.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 89, height: 89)
                            .background(Color.white)
                            .foregroundColor(.gray.opacity(0.2))
                            .clipShape(Circle())
                            .overlay(Circle().stroke(Color.white, lineWidth: 4))
                        Text("John Doe")
                            .font(.system(size: 16))
                            .foregroundColor(.black)
                    }
                    .padding(.bottom, 24)
                    
                    VStack(spacing: 0) {
                        Text("JOB")
                            .font(.system(size: 12).bold())
                        Text("Developer")
                            .font(.system(size: 12))
                    }
                    .frame(width: 200, height: 59)
                    .background(Color.gray.opacity(0.2))
                }
                // 动态偏移：红色背景高度的一半，替代静态42.5
                .offset(y: bgGeo.size.height / 2)
            }
            .frame(width: 249) // 和外层容器宽度保持一致
        }
    }
}

方案二：通用动态适配（支持头像/背景尺寸变化） #

如果头像或红色背景的尺寸可能动态调整，使用PreferenceKey分别获取两者的高度，计算出精准的偏移量，确保头像中心对齐红色背景底部：

struct ProfileView: View {
    @State private var redBgHeight: CGFloat = 0
    @State private var avatarHeight: CGFloat = 0
    
    var body: some View {
        ZStack(alignment: .top) {
            // 外层容器边框
            Rectangle()
                .foregroundColor(.clear)
                .frame(width: 249, height: 291)
                .overlay(RoundedRectangle(cornerRadius: 0).stroke(.gray, lineWidth: 1))
            
            // 红色背景：获取高度
            Rectangle()
                .frame(width: 243, height: 85)
                .foregroundColor(.red)
                .padding([.leading, .trailing, .top], 3)
                .overlay(
                    GeometryReader { geo in
                        Color.clear.preference(key: RedBgHeightKey.self, value: geo.size.height)
                    }
                )
            
            // 内容区域：获取头像高度并动态偏移
            VStack(alignment: .center, spacing: 12) {
                VStack(alignment: .center, spacing: 12) {
                    Image(systemName: "person.crop.circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 89, height: 89)
                        .background(Color.white)
                        .foregroundColor(.gray.opacity(0.2))
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.white, lineWidth: 4))
                        // 获取头像高度
                        .overlay(
                            GeometryReader { geo in
                                Color.clear.preference(key: AvatarHeightKey.self, value: geo.size.height)
                            }
                        )
                    Text("John Doe")
                        .font(.system(size: 16))
                        .foregroundColor(.black)
                }
                .padding(.bottom, 24)
                
                VStack(spacing: 0) {
                    Text("JOB")
                        .font(.system(size: 12).bold())
                    Text("Developer")
                        .font(.system(size: 12))
                }
                .frame(width: 200, height: 59)
                .background(Color.gray.opacity(0.2))
            }
            // 计算偏移：红色背景高度 - 头像高度的一半，确保中心对齐背景底部
            .offset(y: redBgHeight - avatarHeight / 2)
        }
        // 监听尺寸变化
        .onPreferenceChange(RedBgHeightKey.self) { redBgHeight = $0 }
        .onPreferenceChange(AvatarHeightKey.self) { avatarHeight = $0 }
    }
}

// 自定义PreferenceKey用于传递尺寸信息
struct RedBgHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct AvatarHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

关键说明 #

• 方案一适合布局固定的场景，代码更简洁；方案二是通用方案，适配任意尺寸变化。
• 通过GeometryReader获取视图的真实渲染尺寸，替代硬编码的数值，实现完全动态的布局。
• PreferenceKey用于在视图层级间传递尺寸数据，让父视图能精准控制子视图的位置。

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