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

Posted 2023-02-24

【中文标题】如何使用 SwiftUI 将详细视图扩展到全屏？

【英文标题】：How to expand Detail View to full screen with SwiftUI?

【发布时间】：2020-12-24 20:01:28

【问题描述】：

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

截图：

使用的代码如下：

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

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

【问题讨论】：

下一个应该会有帮助***.com/a/62561752/12299030

【参考方案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