SwiftUI中偏移头像被裁切问题：如何保持居中且不裁切？

我尝试偏移图片以制作美观的个人资料视图，但图片出现了裁切情况（见下图）：

相关代码：

NavigationStack {
    ScrollView(.vertical) {
        Section() {
            VStack() {
                Image("dflt_profile_img")
                    .resizable()
                    .frame(width: 100, height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0))
                    .padding(12)
                    .offset(y: -50.0)
            }
            .frame(maxWidth: .infinity)
            .background(Color.cOrange.opacity(0.25))
            .clipShape(RoundedRectangle(cornerRadius: 25.0))
            .padding([.leading, .trailing], 24)
            .padding(.top, 50)
        }
    }
}

请问如何让头像不被裁切，同时仍居中放置在堆叠视图的顶部？

问题核心是offset仅做视觉位移，父容器的布局范围未同步拓展，导致头像超出部分被裁切。以下两种方法可解决：

方法1：给父容器添加顶部内边距抵消偏移 #

给包含头像的VStack添加padding(.top, 50)，刚好抵消头像的offset(y: -50)，同时让父容器的布局范围能容纳完整头像：

NavigationStack {
    ScrollView(.vertical) {
        Section() {
            VStack() {
                Image("dflt_profile_img")
                    .resizable()
                    .frame(width: 100, height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0))
                    .padding(12)
                    .offset(y: -50.0)
            }
            .frame(maxWidth: .infinity)
            .padding(.top, 50) // 新增该行，拓展容器范围抵消偏移
            .background(Color.cOrange.opacity(0.25))
            .clipShape(RoundedRectangle(cornerRadius: 25.0))
            .padding([.leading, .trailing], 24)
            .padding(.top, 50)
        }
    }
}

方法2：用ZStack实现层叠布局（更直观） #

改用ZStack将头像直接放在背景上方，通过层级控制位置，从根源避免偏移裁切问题：

NavigationStack {
    ScrollView(.vertical) {
        Section() {
            ZStack(alignment: .top) {
                // 背景容器
                Color.cOrange.opacity(0.25)
                    .frame(maxWidth: .infinity)
                    .frame(height: 120) // 根据需求设置合适高度
                    .clipShape(RoundedRectangle(cornerRadius: 25.0))
                
                // 头像直接控制位置
                Image("dflt_profile_img")
                    .resizable()
                    .frame(width: 100, height: 100)
                    .clipShape(RoundedRectangle(cornerRadius: 25.0))
                    .padding(12)
                    .offset(y: -50)
            }
            .padding([.leading, .trailing], 24)
            .padding(.top, 50)
        }
    }
}

两种方法都能保证头像完整显示，且维持在背景顶部居中的视觉效果，可根据布局习惯选择。

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