当我在 ipad 模拟器上打开应用程序时，设计已损坏

Question

当我在 iPad 上运行应用程序时，设计没有出现在屏幕上。当您单击左上角导航栏中的主页时，会出现设计，但它已加载一半。当我删除 NavigationView 时，出现正常设计但无法点击。

struct MainView: View {
    @EnvironmentObject var store: BlogPostsStore
    @Environment(\.colorScheme) var colorScheme
    
    var featuredPosts: [BlogPost] {
        return store.blogPosts.filter {$0.featured == true}
    }
    
    var body: some View {
        
        NavigationView {
            ScrollView {
                // featured article
                if featuredPosts.count > 0 {
                    VStack {
                        HStack {
                            Text("Featured posts")
                                .font(.title.bold())
                            Spacer()
                        }
                        LazyVStack {
                            ForEach(featuredPosts) {post in
                                NavigationLink(destination: BlogPostView(blogPost: post)) {
                                    BlogPostCardMain(blogPost: post)
                                }
                            }
                        }
                    }
                    .padding(.horizontal, 15)
                    .padding(.vertical, 30)
                }
// latest articles
                VStack {
                    HStack {
                        Text("Latest posts")
                            .font(.title.bold())
                        Spacer()
                    }
                    .padding(.horizontal, 15)
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyHStack(spacing: 15) {
                            if store.blogPosts.count >= 3 {
                                ForEach(store.blogPosts[0...2]) {post in
                                    NavigationLink(destination: BlogPostView(blogPost: post)) {
                                        BlogPostCardMain(blogPost: post)
                                    }
                                }
                                
                            } else {
                                ForEach(store.blogPosts[0..<store.blogPosts.count]) {post in
                                    NavigationLink(destination: BlogPostView(blogPost: post)) {
                                        BlogPostCardMain(blogPost: post)
                                    }
                                }
                            }
                        }
                        .padding(.leading, 15)
                        .padding(.trailing, 30)
                    }
                    .frame(height: 420)
                    
                    Spacer()
                }
                .padding(.bottom, 40)
                
            }
            .navigationBarTitle("Home")
            .navigationBarItems(
                trailing: Button(action: {store.refreshView()}) { Image(systemName: "arrow.clockwise.circle.fill")
                    .resizable()
                    .frame(width: 30, height: 30)
            })
        }
    }
}

enter image description here

enter image description here

Answer 1

这取决于NavigationView 在 iPad 上的工作方式（以及更大的横向 iPhone）。

提供给 NavigationView 的第一个视图充当可折叠的左侧导航，它是固定宽度。该视图中的任何NavigationLink 目的地都将在占据全屏的主“详细”视图中打开。

您可以在第一个视图下方指定第二个视图，以提供“默认”视图以显示在主屏幕中：

NavigationView {
  // the sidebar view
  ScrollView {
    // etc.
  }
  // the default view
  Text("Default view")
}

您还可以添加第三个视图，如果您愿意，它会自动为您的 iPad 提供类似于 Mail 等使用的三列视图。

另一种选择是通过添加.navigationViewStyle 参数来强制 NavigationView 的工作方式与 iPhone 在纵向模式下的工作方式完全相同：

NavigationView {
  // contents as before
}
.navigationViewStyle(.stack)

虽然这将为您在 iPad 上带来类似 iPhone 的体验，但如果没有精心的设计工作，它并不能真正充分利用更大的屏幕空间。出于这个原因，通常最好花一些时间来设计一个适合默认 iPad 导航视图样式的应用程序设计。