如何使用 SwiftUI 将详细视图扩展到全屏？

Question

我在导航视图中嵌入了一个列表视图，但是，此导航视图仅与屏幕高度有关。这个列表链接到一个详细视图，当点击一行时，详细视图只占屏幕的一半。我希望它打开一个全新的窗口。

截图：

使用的代码如下：

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()
        //    }
    }

有什么想法吗？提前致谢。

Answer 1

如果您需要相同的 UI：

（顶视图底部的导航视图），这是一个解决方案。

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
}

你需要创建一个 Observable 对象

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

别忘了在你的SceneDelegate中初始化它

ContentView().environmentObject(SharedViewModel())

或者

清晰版：

将您的视图层次结构更改为：

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