Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In iOS 15, Apple unveiled the UISheetPresentationController class for displaying an expandable backside sheet in iOS apps. On the time, it’s solely obtainable within the UIKit framework. For SwiftUI, you both should construct your individual part or depend on third occasion libraries. Ranging from iOS 16, the SwiftUI framework comes with a brand new modifier known as presentationDetents for presenting a resizable backside sheet.
To current a backside sheet, you insert the modifier contained in the sheet view. Right here is an instance:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
struct BasicBottomSheet: View { @State non-public var showSheet = false
var physique: some View { VStack { Button(“Present Backside Sheet”) { showSheet.toggle() } .buttonStyle(.borderedProminent) .sheet(isPresented: $showSheet) { Textual content(“That is the expandable backside sheet.”) .presentationDetents([.medium, .large]) }
Spacer() } } } |
You specify a set of detents within the presentationDetents modifier. As proven above, the underside sheet helps each medium and enormous dimension. When it first seems, the underside sheet is displayed in medium dimension. You may increase it to massive dimension by dragging the sheet.
Controlling its Dimension Utilizing Fraction and Top
Apart from Apart from the preset detents resembling .medium, you’ll be able to create a customized detent utilizing .peak and .fraction. Right here is one other instance:
|
.presentationDetents([.fraction(0.1), .height(200), .medium, .large]) |
Now the underside helps 4 completely different sizes together with:
- round 10% of the display screen peak
- a hard and fast peak of 200 factors
- the usual Medium and Massive sizes
Storing the Chosen Detent
Each time you dismiss the underside sheet, the presentation detent is reset to its unique state. In different phrases, for the beneath presentation detents:
|
.presentationDetents([.height(200), .medium, .large]) |
Each time you open the underside sheet, it begins with the .peak(200) detent. What if you wish to restore the final chosen detent? On this case, you’ll be able to declare a state variable to maintain monitor of the at the moment chosen detent:
|
@State non-public var selectedDetent: PresentationDetent = .medium |
For the presentationDetents modifier, you specify the binding of the variable within the choice parameter:
|
.presentationDetents([.height(200), .medium, .large], choice: $selectedDetent) |
SwiftUI then shops the at the moment chosen detent within the state variable. Even for those who dismiss the underside sheet, the following time once you convey the underside sheet, it restores to the final chosen detent.
Disguise the Drag Indicator
It is best to see a drag bar indicating that the sheet is resizable. If you wish to cover the drag indicator, connect the presentationDragIndicator modifier and set it to .hidden:
|
.presentationDragIndicator(.hidden) |
Be aware: We’re updating our Mastering SwiftUI e-book for iOS 16. If you wish to begin studying SwiftUI, take a look at the e-book right here. You’ll obtain a free replace later this 12 months.
Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.
