When I run the app on the iPad, the design does not appear on the screen. When you click on Home in the top left navigation bar, the design comes up, but it is half loaded. When I delete the NavigationView, the normal design appears but is not clickable.
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)
})
}
}
}
CodePudding user response:
This is down to how NavigationView
works on iPads (and also larger iPhones in landscape).
The first view given to NavigationView acts as the collapsible left hand navigation, which is a fixed width. Any NavigationLink
destinations in that view will open in the main, “detail” view that takes up the full screen.
You can specify a second view underneath the first one to provide a ‘default’ view to display in the main screen:
NavigationView {
// the sidebar view
ScrollView {
// etc.
}
// the default view
Text("Default view")
}
You could also add a third view, which will automatically give your iPad a three-column view similar to that used by Mail, etc. if you wanted to.
Another option is to force the NavigationView to work exactly the same way as it does for an iPhone in portrait mode, by adding a .navigationViewStyle
argument:
NavigationView {
// contents as before
}
.navigationViewStyle(.stack)
While that will give you an iPhone-like experience on the iPad, it doesn’t really take full use of the larger screen space without careful design work. For that reason, it’s usually a good idea to invest some time in coming up with an app design that is tailored to the default iPad style of navigation view.