Home > other >  How to allow an image to extend beyond a Form {} in SwiftUI?
How to allow an image to extend beyond a Form {} in SwiftUI?

Time:06-21

I'm looking to have an image extend above a form, as pictured in the first attached screenshot below. My code below accomplishes this when I run it on the Simulator using a iPod touch (7th Generation), but produces the second screenshot when I run it on iPhone 12 and iPhone 13. Any advice about how to ensure that the image extends beyond the limits of the form as intended on all devices?

struct ContentView: View {
    var body: some View {
        Form {
            Circle()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
                .offset(y: -50)
                .padding(.bottom, -50)
        }
    }
}

enter image description here

enter image description here

CodePudding user response:

Form uses different styles on different devices. A possible solution is to use instead List with explicit style for all devices.

Tested with Xcode 13.4 / iOS 15.5

demo

    List {
        Circle()
            .frame(width: 100, height: 100)
            .clipShape(Circle())
            .offset(y: -50)
            .padding(.bottom, -50)
    }
    .listStyle(.grouped)   // << here !!
  • Related