SwiftUI Navigation

SwiftUI_Navigation_Example.swift

import SwiftUI

struct Row: Identifiable {
    let id = UUID()
    let value: Int
}

struct TopListView: View {
    @State var rows: [Row] = [
        .init(value: 1),
        .init(value: 2),
        .init(value: 3),
        .init(value: 4),
        .init(value: 5),
        .init(value: 6),
        .init(value: 7)
    ]
    
    @State var selected: UUID?
    
    var selection: Binding<UUID?> {
        Binding(
            get: { self.selected },
            set: { value in
                self.selected = value
            }
        )
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(self.rows) { row in
                    NavigationLink(
                        destination: CategoriesView(index: row.value),
                        tag: row.id,
                        selection: self.selection
                    ) {
                        Text("\(row.value)")
                    }
                }
            }.navigationBarTitle("Top List")
        }
    }
}

struct CategoriesView: View {
    let index: Int
    let categories: [CategoryData] = [
        .init(title: "One"),
        .init(title: "Two"),
        .init(title: "Three"),
        .init(title: "Four"),
        .init(title: "Five"),
        .init(title: "Six")
    ]
    
    var body: some View {
        print(index)
        return ScrollView {
            ForEach(self.categories) { category in
                CategoryView(category: category)
            }
        }
    }
}

struct CategoryData: Identifiable {
    let id = UUID()
    let title: String
    let data: [ItemData] = [
        .init(value: "One"),
        .init(value: "Two"),
        .init(value: "Three"),
        .init(value: "Four"),
        .init(value: "Five"),
        .init(value: "Six")
    ]
}

struct CategoryView: View {
    let category: CategoryData
    
    @State var selected: UUID?
    
    var selection: Binding<UUID?> {
        Binding(
            get: { self.selected },
            set: { value in self.selected = value }
        )
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack(alignment: .lastTextBaseline) {
                Text(category.title)
                    .font(.largeTitle)
                    .fontWeight(.semibold)
                    .padding(.bottom, 2)
                
                Spacer()
                
                NavigationLink(
                    destination: CategoryList(data: self.category.data),
                    tag: self.category.id,
                    selection: self.selection
                ) {
                    Text("See All".uppercased())
                        .font(.headline)
                }
                .padding(.trailing, 5)
            }
            ScrollView (.horizontal, showsIndicators: false) {
                HStack(spacing: 10) {
                    ForEach(self.category.data) { recipe in
                        ItemView(data: recipe)
                            .frame(height: 200)
                    }
                }
            }
        }
        .padding(.leading, 10)
        .padding(.bottom, 20)
    }
}

struct ItemData: Identifiable {
    let id = UUID()
    let value: String
}

struct ItemView: View {
    let data: ItemData
    var body: some View {
        VStack {
            Text(data.value)
                .frame(width: 150, height: 150)
        }.background(Color.green)
    }
}


struct CategoryList: View {
    var data: [ItemData] = []
    
    var body: some View {
        List {
            ForEach(self.data) { item in
                Text("\(item.value)")
            }
        }.navigationBarTitle("Category List")
    }
}

print("✅")

import PlaygroundSupport

PlaygroundPage.current.liveView = UIHostingController(
    rootView: TopListView()
)

//PlaygroundPage.current.liveView = UIHostingController(
//    rootView: CategoryView(data: .init(title: "One"))
//)

//PlaygroundPage.current.liveView = UIHostingController(
//    rootView: CategoriesView()
//)