SwiftUI中实现图片超出Sheet区域显示的问题

嘿，我完全懂你的困扰！你想让Sheet里的那张青蛙图片跳出Sheet的顶部边界展示，但用offset(y: -100)之后，图片只在Sheet内部移动，超出的部分被裁掉了——这是因为SwiftUI的Sheet默认会裁剪掉超出自身容器范围的内容，咱们来快速解决这个问题：

核心问题原因 #

默认情况下，Sheet的内容视图是开启裁剪（clipped(true)）的，所以任何超出Sheet边界的元素都会被自动裁掉，哪怕你用offset调整了位置也没用。

解决方案代码 #

我帮你修改了原代码，补上了缺失的状态变量，同时添加了关键的修饰符来实现你要的效果：

import SwiftUI

struct LoginView: View {
    @State private var showingResetPassword = false
    @State private var isToggled = false // 补上你原代码里缺失的Toggle状态变量
    
    var body: some View {
        VStack {
            HStack {
                Toggle("", isOn: $isToggled)
                    .toggleStyle(CheckmarkToggleStyle())
                
                Text("Beni hatırla")
                
                Spacer()
                
                Button("Şifremi Unuttum") {
                    showingResetPassword.toggle()
                }
                .foregroundColor(Color.black)
                .sheet(isPresented: $showingResetPassword) {
                    ZStack {
                        // 这里放置Sheet的核心内容（比如重置密码表单）
                        VStack(spacing: 20) {
                            Spacer()
                            Text("Şifrenizi sıfırlayın")
                                .font(.title.bold())
                            // 示例：添加密码输入框和重置按钮
                            TextField("Yeni şifre", text: .constant(""))
                                .textFieldStyle(.roundedBorder)
                            Button("Şifreyi sıfırla") {}
                                .buttonStyle(.borderedProminent)
                            Spacer()
                        }
                        .padding()
                        
                        // 要超出Sheet的图片
                        Image("resetPasswordFrog")
                            .offset(y: -100)
                    }
                    .presentationDetents([.medium, .large])
                    .clipped(false) // 关键！关闭裁剪，允许内容超出Sheet边界
                    .presentationBackground(.white) // 设置Sheet背景，避免透出下层内容
                }
            }
            .padding(.top, 10)
            
            Spacer()
        }
        .padding()
    }
}

// 实现你用到的自定义Toggle样式
struct CheckmarkToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isOn.toggle()
        } label: {
            Image(systemName: configuration.isOn ? "checkmark.square.fill" : "square")
                .foregroundColor(configuration.isOn ? .blue : .gray)
        }
    }
}

关键说明 #

• .clipped(false)：这是解决问题的核心——它会关闭视图的自动裁剪，让图片超出Sheet顶部的部分能够正常显示出来。
• ZStack层级：把图片放在ZStack的上层，确保它能覆盖在Sheet的核心内容上方，同时通过offset(y: -100)调整位置到Sheet外部。
• presentationBackground：设置Sheet的背景颜色，避免图片超出部分透出下面的登录视图内容，如果你想要透明背景可以去掉这个修饰符。

这样修改之后，你的青蛙图片就能完美地显示在Sheet的顶部上方啦～

备注：内容来源于stack exchange，提问作者Tayfun Sağdıç