How to expand Detail View to full screen with SwiftUI?

Question

I have a list view embedded in a Navigation View, however, this Navigation View is only about the screen height. This list links to a detailed view, and when a row is tapped, the Detail View only takes up half of the screen. I would like it to open a completely new window.

Screenshots:

The code is used is the following:

import SwiftUI
import CoreData

extension UIScreen{
    static let screenWidth = UIScreen.main.bounds.size.width
    static let screenHeight = UIScreen.main.bounds.size.height
    static let screenSize = UIScreen.main.bounds.size
}

let topCardHeight: CGFloat = 350

struct HomeView: View {
    @Environment(\.managedObjectContext) var moc
    @FetchRequest(entity: SavedPoem.entity(), sortDescriptors: []) var savedpoems : FetchedResults<SavedPoem>
    
    
    var body: some View {
        
        
        VStack {
            VStack (alignment: .center){
                
                Text("Today's Poem, November 18th...")
                    .font(.subheadline)
                    .foregroundColor(.white)
                    .padding(.bottom)
                    .padding(.top, 75)
                
                Text("No Man Is An Island")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(.white)
                    .padding(.bottom,1)
                
                Text("by John Donne")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(.white)
                    .padding(.bottom, 35)
                
                Button(action: {}) {
                    
                    Text("Read Now")
                        .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                        .font(.subheadline)
                        .foregroundColor(.white)
                        .padding(15)
                        .border(Color.white, width: 3)
                    
                }
                
            }
            .frame(width: UIScreen.screenWidth, height: topCardHeight, alignment: .top)
            .background(Color.black)
            .edgesIgnoringSafeArea(.top)
            .edgesIgnoringSafeArea(.bottom)
            .padding(.bottom, 0)
            
            NavigationView{
                List{
                    ForEach(savedpoems, id:\.title) {SavedPoem in
                        NavigationLink (destination: ContentView()){
                            ZStack {
                                Rectangle().fill(Color.white)
                                    .frame(width: UIScreen.main.bounds.width - 32, height: 70)
                                    .cornerRadius(10).shadow(color: .gray, radius: 4)
                                HStack {
                                    VStack (alignment: .leading){
                                        Text("\(SavedPoem.title ?? "")").font(.headline)
                                            .lineLimit(1)
                                        
                                        Text("\(SavedPoem.author ?? "")").font(.subheadline)
                                            .foregroundColor(.secondary)
                                    }
                                    Spacer()
                                    
                                }.padding()
                            }
                            //                }.onDelete(perform: remove)
                        }
                        
                        
                    }
                }
                .navigationTitle("My Saved Poems")
                .navigationBarHidden(true)
                .edgesIgnoringSafeArea(.top)
                .padding(.top, 0)
            }
            
        }
        //    func remove(at offsets : IndexSet) {
        //        for index in offsets {
        //            let delete = SavedPoem[index]
        //            self.moc.delete(delete)
        //        }
        //        try? self.moc.save()
        //    }
    }

Any ideas? Thanks in advance.

Next should be helpful https://stackoverflow.com/a/62561752/12299030 — Asperi, Dec 24 '20 at 20:04

Ouail Bellal · Accepted Answer · 2020-12-24T20:22:01.590

If you need the same UI:

(The navigation view at the bottom of your top view) , here is a solution for it .

var body: some View { 
@EnvironmentObject var sharedViewModel : SharedViewModel
VStack {
 VStack (alignment: .center){
  if sharedViewModel.currentPageIsHome {
    // your top view body here ..
  }
 }
 NavigationView{\*....*\}
 }
}.onAppear {
    sharedViewModel.currentPageIsHome = true
}.onDisappear {
    sharedViewModel.currentPageIsHome = false
}

And you need to create an Observable object

class SharedViewModel: ObservableObject {
 @Published var currentPageIsHome = false
}

And don't forget to initialize it in your SceneDelegate

ContentView().environmentObject(SharedViewModel())

Or

Clear version :

change your view hierarchy to :

NavigationView {
 List{
   Section(header: YourTopView()) {
   // ... your list content 
   }
 }
}

How to expand Detail View to full screen with SwiftUI?

1 Answers1

If you need the same UI:

Clear version :