HomeiOS DevelopmentPresenting {a partially} seen backside sheet in SwiftUI on iOS 16

Presenting {a partially} seen backside sheet in SwiftUI on iOS 16

Revealed on: June 6, 2022

This submit is updated for Xcode 14.0 Beta 1 and iOS 16 Beta 1. It supersedes a model of this submit that you’ll find right here

On iOS 15, Apple granted builders the power to current partially seen backside sheets utilizing a element referred to as UISheetPresentationController. Initially, we needed to resort to utilizing a UIHostingController to deliver this element to SwiftUI.

With iOS 16, we do not have to do that anymore. You may make use of the presentationDetents view modifier to configure your sheets to be absolutely seen, roughly half seen, or some customized fraction of the display screen’s top.

To do that, you possibly can apply the presentationDetents modifier by making use of it to your sheet’s content material:

struct DetentsView: View {
    @State var isShowingSheet = false

    var physique: some View {
        Button("Present the sheet!") {
            isShowingSheet = true
        .sheet(isPresented: $isShowingSheet) {
            ZStack {
                Shade(pink: 0.95, inexperienced: 0.9, blue: 1)
                Textual content("That is my sheet. It may very well be an entire view, or only a textual content.")
            .presentationDetents([.medium, .fraction(0.7)])

This is what the sheet appears like when it is introduced on an iPhone:

On this instance, my sheet will initially take up about half the display screen and might be expanded to 70% of the display screen top. If I need to enable the person to increase my sheet to the complete top of the display screen I might add the .massive choice to the listing of presentationDetents.

By default, sheets will solely assist the .massive detent so that you need not use the presentationDetents view modifier while you need your sheet to solely assist the view’s full top.



Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments