ios – Moving an image over a sheet SwiftUI


You can set the presentationBackground to a view with its top part being transparent, e.g. a UnevenRoundedRectangle with some padding at the top. Then you can just position the image at the top of the sheet.

The image still doesn’t technically “exceed” the bounds of the sheet, but since the top part of the sheet’s background is transparent, it looks as if the image is sticking out of the sheet.

Here is a simple example.

struct ContentView: View {
    @State var sheet = false
    
    var body: some View {
        Button("Show Sheet") {
            sheet = true
        }
        .sheet(isPresented: $sheet) {
            VStack {
                Image("my profile pic")
                Spacer()
            }
            .presentationBackground {
                UnevenRoundedRectangle(topLeadingRadius: 30, topTrailingRadius: 30)
                    .fill(.background)
                    .overlay(alignment: .topTrailing) {
                        // the close button
                        Button {
                            sheet = false
                        } label: {
                            Image(systemName: "xmark")
                                .tint(.gray)
                                .font(.title)
                        }
                        .padding(30)
                    }
                    .padding(.top, 50)
            }
            .presentationDetents([.medium, .large])
            // the drag indicator would still appear at the "actual"
            // top of the sheet, so we hide it
            .presentationDragIndicator(.hidden)
            // you can make your own drag indicator with shapes if needed
        }
    }
}

Output:

enter image description here

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img