Tuesday, September 27, 2022
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 publish is updated for Xcode 14.0 Beta 1 and iOS 16 Beta 1. It supersedes a model of this publish that you’ll find right here

On iOS 15, Apple granted builders the power to current partially seen backside sheets utilizing a element known as UISheetPresentationController. Initially, we needed to resort to utilizing a UIHostingController to convey 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 totally seen, roughly half seen, or some customized fraction of the display’s top.

To do that, you may 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 {
                Colour(crimson: 0.95, inexperienced: 0.9, blue: 1)
                Textual content("That is my sheet. It may very well be a complete view, or only a textual content.")
            }
            .presentationDetents([.medium, .fraction(0.7)])
        }
    }
}

Here is what the sheet appears to be like like when it is offered on an iPhone:

On this instance, my sheet will initially take up about half the display and could be expanded to 70% of the display top. If I need to enable the consumer to broaden my sheet to the total top of the display I’d add the .giant choice to the record of presentationDetents.

By default, sheets will solely assist the .giant detent so that you needn’t use the presentationDetents view modifier whenever you need your sheet to solely assist the view’s full top.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular