Tuesday, February 7, 2023
Learning Code
  • Home
  • JavaScript
  • Java
  • Python
  • Swift
  • C++
  • C#
No Result
View All Result
  • Home
  • JavaScript
  • Java
  • Python
  • Swift
  • C++
  • C#
No Result
View All Result
Learning Code
No Result
View All Result
Home Swift

How to Display a Bottom Sheet Using SwiftUI

learningcode_x1mckf by learningcode_x1mckf
September 9, 2022
in Swift
0
How to Display a Bottom Sheet Using SwiftUI
74
SHARES
1.2k
VIEWS
Share on FacebookShare on Twitter


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 referred to as presentationDetents for presenting a resizable backside sheet.

You might also like

The abstract Vapor service factory design pattern

SwiftNIO tutorial – The echo server

Introducing – Vapor cheatsheet – The.Swift.Dev.

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 personal 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’ll be able to develop it to giant dimension by dragging the sheet.

swiftui-bottom-sheet

Controlling its Dimension Utilizing Fraction and Peak

Apart from Apart from the preset detents similar to .medium, you may 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
swiftui-bottom-sheet-expandable

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 may declare a state variable to maintain observe of the at the moment chosen detent:

@State personal 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 in the event you dismiss the underside sheet, the subsequent time once you carry the underside sheet, it restores to the final chosen detent.

Conceal the Drag Indicator

You must see a drag bar indicating that the sheet is resizable. If you wish to conceal the drag indicator, connect the presentationDragIndicator modifier and set it to .hidden:

.presentationDragIndicator(.hidden)

Be aware: We’re updating our Mastering SwiftUI 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 yr.

Simon Ng


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+.





Source link

Share30Tweet19
learningcode_x1mckf

learningcode_x1mckf

Recommended For You

The abstract Vapor service factory design pattern

by learningcode_x1mckf
February 1, 2023
0
The abstract Vapor service factory design pattern

I've written a number of articles about manufacturing unit design patterns on my weblog and this time I might like to speak a couple of particular one, which...

Read more

SwiftNIO tutorial – The echo server

by learningcode_x1mckf
January 27, 2023
0
SwiftNIO tutorial – The echo server

Intoducing SwiftNIO In the event you used a excessive degree net framework, corresponding to Vapor, up to now, you would possibly had some interplay with occasion loops...

Read more

Introducing – Vapor cheatsheet – The.Swift.Dev.

by learningcode_x1mckf
January 23, 2023
0
Introducing – Vapor cheatsheet – The.Swift.Dev.

Out there on Gumroad Thanks for supporting my work by buying the cheatsheet. 🙏 Download now A whole Vapor framework reference for novices. greater than...

Read more

iCloud Programming Tutorial for iOS: An Introduction

by learningcode_x1mckf
January 18, 2023
0
iCloud Programming Tutorial for iOS: An Introduction

Editor’s observe: This week, we work with Ziad Tamim once more to provide you an introduction of iCloud programming. You’ll learn to save and retrieve knowledge from iCloud.On...

Read more

Easy multipart file upload for Swift

by learningcode_x1mckf
January 18, 2023
0
Easy multipart file upload for Swift

I imagine that you've got already heard in regards to the well-known multipart-data add method that everybody likes to add recordsdata and submit type knowledge, but when not,...

Read more
Next Post
The Most Popular JavaScript Frameworks of 2022

The Most Popular JavaScript Frameworks of 2022

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Related News

20 million JavaScript devs can now build applications on NEAR: KBW 2022

20 million JavaScript devs can now build applications on NEAR: KBW 2022

September 17, 2022
Best free coding courses: Learn Java online

Best free coding courses: Learn Java online

January 26, 2023
Different server for Google API – JavaScript – SitePoint Forums

Different server for Google API – JavaScript – SitePoint Forums

January 27, 2023

Browse by Category

  • C#
  • C++
  • Java
  • JavaScript
  • Python
  • Swift

RECENT POSTS

  • C++ Is TIOBE's Language Of The Year – iProgrammer
  • JobRunr, the Java Scheduler Library, Released Version 6.0 – InfoQ.com
  • An Introduction to Lodash and Its Benefits for JavaScript Developers – MUO – MakeUseOf

CATEGORIES

  • C#
  • C++
  • Java
  • JavaScript
  • Python
  • Swift

© 2022 Copyright Learning Code

No Result
View All Result
  • Home
  • JavaScript
  • Java
  • Python
  • Swift
  • C++
  • C#

© 2022 Copyright Learning Code

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?