How to display SwiftUI sheet Half screen

To present a SwiftUI sheet that takes up half of the screen, you can use the .sheet(isPresented:onDismiss:content:) modifier with a custom View that conforms to the View protocol.

Here’s an example:

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        Button("Present Sheet") {
            isPresented.toggle()
        }
        .sheet(isPresented: $isPresented) {
            HalfSheetView()
        }
    }
}

struct HalfSheetView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("Half Sheet View")
            Button("Dismiss") {
                presentationMode.wrappedValue.dismiss()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
        .edgesIgnoringSafeArea(.all)
        .frame(height: UIScreen.main.bounds.height / 2)
    }
}

In this example, the ContentView contains a button that toggles the isPresented state, which controls whether the sheet is shown. The sheet’s content is provided by the HalfSheetView, which is presented when the isPresented state is true.

The HalfSheetView uses the .frame(maxWidth:maxHeight:) modifier to make sure it takes up the full width and height of the screen. Then, it sets its background color to white and ignores the safe area edges to cover the full screen. Finally, it uses the .frame(height:) modifier to set its height to half of the screen’s height.

The presentationMode environment variable is used to dismiss the sheet when the “Dismiss” button is tapped.

Note: You can adjust the height of the sheet by changing the value passed to the .frame(height:) modifier.

How to display a bottom sheet in swiftui

To display a bottom sheet in SwiftUI, you can use the .sheet(isPresented:onDismiss:content:) modifier with a custom View that conforms to the View protocol and use the .offset(y:) modifier to position the sheet at the bottom of the screen.

Here’s an example:

struct ContentView: View {
    @State private var isPresented = false
    
    var body: some View {
        Button("Present Sheet") {
            isPresented.toggle()
        }
        .sheet(isPresented: $isPresented) {
            BottomSheetView()
        }
    }
}

struct BottomSheetView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("Bottom Sheet View")
            Button("Dismiss") {
                presentationMode.wrappedValue.dismiss()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
        .cornerRadius(10)
        .padding()
        .offset(y: UIScreen.main.bounds.height - 200)
        .gesture(DragGesture()
            .onChanged { value in
                if value.translation.height > 0 {
                    self.presentationMode.wrappedValue.dismiss()
                }
            }
        )
    }
}

In this example, the ContentView contains a button that toggles the isPresented state, which controls whether the bottom sheet is shown. The sheet’s content is provided by the BottomSheetView, which is presented when the isPresented state is true.

The BottomSheetView uses the .frame(maxWidth:maxHeight:) modifier to make sure it takes up the full width and height of the screen. Then, it sets its background color to white, applies a corner radius of 10, and adds some padding to its content. Finally, it uses the .offset(y:) modifier to position the sheet at the bottom of the screen.

The presentationMode environment variable is used to dismiss the sheet when the “Dismiss” button is tapped or when the user swipes down on the sheet using the DragGesture().

Note: You can adjust the position of the sheet by changing the value passed to the .offset(y:) modifier. You can also adjust the height of the sheet by changing the value passed to the .offset(y:) modifier and the content of the sheet to fit your requirements.

SwiftUI Half-Screen Sheet for various height

To create a half-screen sheet in SwiftUI with varying heights, you can use the .sheet() modifier along with a GeometryReader to determine the height of the sheet. Here’s an example:

struct ContentView: View {
    @State private var isPresented = false
    @State private var sheetHeight: CGFloat = 300
    
    var body: some View {
        Button("Show Sheet") {
            isPresented = true
        }
        .sheet(isPresented: $isPresented, content: {
            GeometryReader { geometry in
                VStack {
                    Text("Half-Screen Sheet")
                        .font(.headline)
                    Divider()
                    ScrollView {
                        // Your content here
                    }
                    .frame(height: sheetHeight)
                    .onAppear {
                        // Set the sheet height to half of the screen height
                        sheetHeight = geometry.size.height / 2
                    }
                }
            }
        })
    }
}

In this example, we have a button that, when pressed, sets the isPresented state to true, which shows the sheet. The sheet’s content is wrapped in a GeometryReader to get the size of the sheet, which is then used to set the sheetHeight state to half of the screen height in the onAppear modifier.

Inside the sheet’s content, we have a VStack with a headline, a divider, and a scrollable view with your content. The ScrollView has a fixed height equal to the sheetHeight state.

With this approach, the sheet will always be half the height of the screen, no matter the device or orientation.