当我在 ipad 模拟器上打开应用程序时，设计被破坏了

Question

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

struct MainView: View {
    @EnvironmentObject var store: BlogPostsStore
    @Environment(\.colorScheme) var colorScheme
    
    var featuredPosts: [BlogPost] {
        return store.blogPosts.filter {[=11=].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

Answer 1

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

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

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

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

您还可以添加第三个视图，如果您愿意，它会自动为您的 iPad 提供一个 three-column 类似于邮件等所使用的视图。

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

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

虽然这会给您带来 iPhone-like 在 iPad 上的体验，但如果没有精心设计，它并不能真正充分利用更大的屏幕 space。出于这个原因，花一些时间来设计一个针对默认 iPad 导航视图样式的应用程序设计通常是个好主意。

当我在 ipad 模拟器上打开应用程序时，设计被破坏了

when I open the app on ipad simulator the design is broken

swift

xcode

swiftui

swiftui-navigationlink