In a screen design, I am showing a sheet from the bottom, and in this section I want to move an image above the sheet part. In this part, when I move it up with offset, it only remains in the sheet, but I want to do it as follows.
I want this:
Problem:
import SwiftUI
struct LoginView: View {
@State private var showingResetPassword = false
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{
Image("resetPasswordFrog")
.offset(y: -100)
}
.presentationDetents([.medium, .large])
}
}.padding(.top, 10)
I used ZStack but I couldn’t display it the way I wanted.
3
Answers
try using an overlay for sheet and the image like:
this is only an example.
You can set the
presentationBackground
to a view with its top part being transparent, e.g. aUnevenRoundedRectangle
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.
Output:
Instead of moving the image up, you can move the background down.
If you use rounded corners for the background, you’ll need to cover them at the bottom.