SwiftUI bottom sheet like note app's format tab

Question

Currently, I have to implement bottom sheet. And I found the very example of my need.

Is this component system component of swift or swiftui? OR do I need to implement on my own?

PLEASE LET ME KNOW IF U HAVE SOME INFOS! XD

At first I implement with ZStack, drag gesture but the animation is not what I expected. I need Information about whether there is component like .sheet(isPresented: Bool, content: View) of the modal like above image.

Just a sheet with a custom detent. Everything inside is all custom there are no built in components. This can be done in SwiftUI or UIKit. — lorem ipsum, Nov 10 '22 at 06:00
@lorem ipsum Thanks for you. But the custom detent is only available on iOS 16. My project's minimum deployment is 15.5. Is there any solution to control height of detent sheet under iOS 16? — 마요Mayo, Nov 11 '22 at 04:19
For a half sheet you can use a UIKit wrapper https://stackoverflow.com/questions/56700752/swiftui-half-modal/67994666#67994666 — lorem ipsum, Nov 11 '22 at 05:19
Yeah I understand what you want to let me know. But that is not my topic. My point is `Can I specify the height of sheet?`. If I want to make 300pt height sheet, for example, is it possible to make sheet's height 300pt. Not medium() or large(). There is way of course, using custom Detent type. But under iOS 16, it is unavailable so I'm finding another solution. Thank you — 마요Mayo, Nov 11 '22 at 05:42

score 0 · Answer 1 · answered Nov 10 '22 at 06:41

As our friend said before, it is a sheet. Inside the sheet you can either define a new view or call any of your views. Then you have to use the modifier .presentationDetents which receive a Set of PresentationDetents to say where the view has to stop when appearing on the screen. This modifier must be apply to the content of the sheet and not directly to the sheet.

struct ContentView: View {
    @State var isSheetShown = false
    var body: some View {
        VStack {
            Button("Show view"){
                isSheetShown = true
            }
        }.sheet(isPresented: $isSheetShown, content: {
            StackOfButtons()
                .presentationDetents([.medium])
        })
        .padding()
    }
}

Finally, to create that stack type of buttons you can put them all in a HStack, give them individually some padding, set a little of spacing in the HStack and the round the corners of the stack. Something like this:

struct StackOfButtons: View {
    var body: some View {
        HStack(spacing: 2){
            Button {
                print("Hola que ase")
            } label: {
                Image(systemName: "list.bullet")
                    .padding()
                    .background(.thinMaterial)
                    .foregroundColor(.black)
            }
            Button {
                print("Hola que ase")
            } label: {
                Image(systemName: "list.dash")
                    .padding()
                    .background(.thinMaterial)
                    .foregroundColor(.black)
            }
            Button {
                print("Hola que ase")
            } label: {
                Image(systemName: "list.number")
                    .padding()
                    .background(.thinMaterial)
                    .foregroundColor(.black)
            }
        }.cornerRadius(10)
    }
}

Result

Thanks for your reply! :) But my project, unfortunately, the target version is 15.0 so the custom detent is not available. Is there any solution to control the height of sheet? No matter swiftui or uikit. — 마요Mayo, Nov 11 '22 at 03:04
Ohhh I see... you could try to build your own one, it doesn't have to be really hard in SwiftUI. You could have a look at this link https://swiftwithmajid.com/2019/12/11/building-bottom-sheet-in-swiftui/ and use it as a guide. I hope this works for you :) — Felix Uff, Nov 12 '22 at 08:24

SwiftUI bottom sheet like note app's format tab

1 Answers1