I'm trying to replicate something like Apple's Reminders app where there are some "blocks" (Today, Scheduled, All and Flagged), but all my attempts end in XCode telling me its encountering navigation issues. I'm using XCode 13.2.1 and iOS 15.2 right now.
How can I get each bock to navigation to its own destination and stop the app from choking on the NavigationLink errors?
Here is my code:
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section(header: Text("Primary Section")) {
NavigationLink(destination: Text("First")) {
Label("First", systemImage: "1.circle")
}
Label("Second", systemImage: "2.circle")
Label("Third", systemImage: "3.circle")
}
Section(header: Text("Block Section")) {
VStack (spacing: 20) {
HStack (spacing: 20) {
Blocks(title: "1")
Blocks(title: "2")
}
HStack (spacing: 20) {
Blocks(title: "3")
Blocks(title: "4")
}
}
.foregroundColor(Color.blue)
.frame(height: 160)
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
.listRowBackground(Color.clear)
}
Section(header: Text("Lower Section")) {
NavigationLink(destination: Text("Lower First")) {
Label("First", systemImage: "1.circle")
}
Label("Second", systemImage: "2.circle")
Label("Third", systemImage: "3.circle")
NavigationLink(destination: Text("Lower Fourth")){
Label("Fourth", systemImage: "4.circle")
}
}
}
.listStyle(InsetGroupedListStyle())
.navigationBarTitle(Text("Catalogue"), displayMode: .large)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Blocks: View {
let title: String
var body: some View {
ZStack {
NavigationLink(
destination: Text(title)) {
EmptyView()
}
.opacity(0)
RoundedRectangle(cornerRadius: 12, style: .continuous)
Image(systemName: "\(title).circle.fill")
.foregroundColor(.white)
.imageScale(.large)
}
}
}```