Home > front end >  Resize Sheet presentation SwiftUI
Resize Sheet presentation SwiftUI

Time:01-05

I am trying to present Model view with small size. Is there any way to resize it.

Button("Present") { self.presentingModal = true }
    .padding()
    .sheet(isPresented: $presentingModal) {} 
   content: {
        ModelView(presentedAsModal: $presentingModal)
            }

It presents the model with with default size. I am not able to resize it.

PS: Our goal is to present Modal at centre with custom size.

CodePudding user response:

Not in pure SwiftUI. I think you'd have to use UIKit via UIViewControllerRepresentable. The best you can do in SwiftUI is modify the contents of the modal, e.g:

struct ContentView: View {
        @State var showSheet = false
        var body: some View {
            VStack {
                Button("Show sheet") {
                    showSheet = true
                }
            }
            .sheet(isPresented: $showSheet) {
                SheetView()
            }
        }
    }
    struct SheetView: View {
        @State var largerSheet = false
        var body: some View {
            VStack {
                Toggle("Larger Sheet", isOn: $largerSheet)
                if largerSheet {
                  ZStack {
                    Text("Larger")
                    Rectangle().frame(width: 300, height: 600).foregroundColor(.green).opacity(0.3)
                  }
                } else {
                  ZStack {
                  Text("Smaller")
                    Rectangle().frame(width: 200, height: 300).foregroundColor(.blue).opacity(0.3)
                  }
                }
            }
            .padding()
        }
    }

CodePudding user response:

You can overlay a resized one over the current View with a button tap.

import SwiftUI

struct SheetView: View {
    @State private var showSheet: Bool = false
    var body: some View {
        NavigationView {
            VStack {
                ZStack {
                    Button("Please select a mailing address") {
                        showSheet.toggle()
                    }.foregroundColor(Color.black)
                }
                Spacer()
            }
            .navigationBarTitleDisplayMode(.inline)
            .navigationViewStyle(StackNavigationViewStyle())
            //.ignoresSafeArea()
        }
        .overlay(popOver)
    }
    
    var popOver: some View {
        Group {
            if showSheet {
                ZStack(alignment: .bottom) {
                    Color.black.opacity(0.4).ignoresSafeArea()
                        .onTapGesture {
                            showSheet.toggle()
                        }
                    ZStack {
                        Rectangle()
                            .fill(Color.white)
                            .frame(maxWidth: .infinity, maxHeight: 340.0)
                            .cornerRadius(20.0, corners: [.topLeft, .topRight])
                        HelloView()
                    }
                }
            }
        }
    }
}

struct HelloView: View {
    var body: some View {
        Text("Hello")
    }
}
  •  Tags:  
  • Related