SwiftUI small modal view

Question

I am starting out in SwiftUI and have an issue.

I have a main view loads a modal view, on iPhone this goes full screen, iPad by default covers part of the screen.

The below code appears to do the 'default' loads a view that is centered but not full screen. What id ideally like is to be able to make the model view smaller. It is a login screen where user enters login details.

Using storyboards, I could achieve this with 'preferredcontentsize' but SwiftUI comparisons don't appear to work.

struct Login_View: View {
    @State private var showingSheet = false

    var body: some View {
        Button("Show Alert") {
            showingSheet = !showingSheet
        }
        .sheet(isPresented:$showingSheet) {
            Credentials_View()
        }
    }
}

(Below is the modal view, atm it just shows some colours whilst I get to grips with that is going on)

struct Credentials_View: View {
    var body: some View {
        GeometryReader { metrics in
            VStack(spacing: 0) {
                Color.red.frame(height: metrics.size.height * 0.43)
                Color.green.frame(height: metrics.size.height * 0.37)
                Color.yellow
            }
        }
    }
}

I wish the sheets were more configurable in swiftui for iPhone — a1cd, May 04 '21 at 21:16
Does this answer your question? [SwiftUI - Half modal?](https://stackoverflow.com/questions/56700752/swiftui-half-modal) — lorem ipsum, Jul 14 '22 at 15:12

score 2 · Answer 1 · answered Jul 14 '22 at 15:05

IOS 16+

As of iOS 16, a half sheet can be created using .sheet where the displayed view(example Credentials_View) has the .presentationDetents set to .medium.

struct Login_View: View {
    @State private var showingSheet = false

    var body: some View {
        Button("Show Alert") {
            showingSheet = !showingSheet
        }
        .sheet(isPresented:$showingSheet) {
            Credentials_View()
               .presentationDetents([.medium])
        }
    }
}

Result:

And .presentationDragIndicator can be added to make the indicator visible:

.presentationDragIndicator(.visible)

Result:

SwiftUI small modal view

1 Answers1