Tuesday, August 9, 2022
HomeiOS DevelopmentLearn how to Show a Backside Sheet Utilizing SwiftUI

Learn how to Show a Backside Sheet Utilizing SwiftUI


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 must construct your personal part or depend on third get together 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:

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 possibly can develop it to massive dimension by dragging the sheet.

swiftui-bottom-sheet

Controlling its Dimension Utilizing Fraction and Peak

Aside from Aside from the preset detents equivalent to .medium, you possibly can create a customized detent utilizing .top and .fraction. Right here is one other instance:

Now the underside helps 4 totally different sizes together with:

  • round 10% of the display screen top
  • a hard and fast top of 200 factors
  • the usual Medium and Massive sizes
swiftui-bottom-sheet-expandable

Storing the Chosen Detent

Each time you dismiss the underside sheet, the presentation detent is reset to its authentic state. In different phrases, for the beneath presentation detents:

Each time you open the underside sheet, it begins with the .top(200) detent. What if you wish to restore the final chosen detent? On this case, you possibly can declare a state variable to maintain observe of the presently chosen detent:

For the presentationDetents modifier, you specify the binding of the variable within the choice parameter:

SwiftUI then shops the presently chosen detent within the state variable. Even in the event you dismiss the underside sheet, the subsequent time whenever you convey the underside sheet, it restores to the final chosen detent.

Disguise the Drag Indicator

You need 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:

Notice: 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. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular