使用SwiftUI实现导航链接多级跳转

PHOTO EMBED

Wed Feb 22 2023 05:12:56 GMT+0000 (Coordinated Universal Time)

Saved by @zelda #swift #swiftui 

//
//  SearchableDemo.swift
//  SwiftUIDemo
//
//  Created by shiyanjun on 2023/2/17.
//

import SwiftUI

struct NavigtionViewDemo: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("我的组件") {
                    MyCompView()
                }
                
                NavigationLink("我的API") {
                    MyApiView()
                }
            }
            .navigationTitle("配置中心")
            .navigationBarTitleDisplayMode(.inline)
            .listStyle(PlainListStyle())
        }
    }
}

struct MyCompView: View {
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(destination: ArticleCompView()) {
                    Text("文章组件")
                }
                NavigationLink(destination: PhotoCompView()) {
                    Text("图片组件")
                }
                NavigationLink(destination: ChartCompView()) {
                    Text("报表组件")
                }
            }
            .listStyle(PlainListStyle())
            .navigationBarTitle("我的组件", displayMode: .inline)
            .navigationBarItems(trailing: AddCompButtonView())
        }
    }
}

struct MyApiView: View {
    
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(destination: ArticleApiView()) {
                    Text("文章API")
                }
                NavigationLink(destination: PhotoApiView()) {
                    Text("图片API")
                }
                NavigationLink(destination: ChartApiView()) {
                    Text("报表API")
                }
            }
            .listStyle(PlainListStyle())
            .navigationBarTitle("我的API", displayMode: .inline)
            .navigationBarItems(trailing: AddApiButtonView())
        }
    }
}

struct ArticleCompView: View {
    var body: some View {
        NavigationStack {
            Text("文章组件信息")
                .navigationTitle("文章组件信息")
        }
    }
}

struct PhotoCompView: View {
    var body: some View {
        NavigationStack {
            Text("照片组件信息")
                .navigationTitle("照片组件信息")
        }
    }
}

struct ChartCompView: View {
    var body: some View {
        NavigationStack {
            Text("报表组件信息")
                .navigationTitle("报表组件信息")
        }
    }
}

struct ArticleApiView: View {
    var body: some View {
        NavigationStack {
            Text("文章API")
                .navigationTitle("文章API")
        }
    }
}

struct PhotoApiView: View {
    var body: some View {
        NavigationStack {
            Text("照片API")
                .navigationTitle("照片API")
        }
    }
}

struct ChartApiView: View {
    var body: some View {
        NavigationStack {
            Text("报表API")
                .navigationTitle("报表API")
        }
    }
}

struct AddCompButtonView: View {
    var body: some View {
        NavigationStack {
            NavigationLink(destination: AddCompView()) {
                Image(systemName: "plus")
            }
        }
    }
}

struct AddApiButtonView: View {
    var body: some View {
        NavigationStack {
            NavigationLink(destination: AddApiView()) {
                Image(systemName: "plus")
            }
        }
    }
}

struct AddCompView: View {
    var body: some View {
        NavigationStack {
            ZStack {
                Color.orange
                Text("创建组件页面")
            }
            .navigationTitle("创建组件页面")
        }
    }
}

struct AddApiView: View {
    var body: some View {
        ZStack {
            Color.purple
            Text("创建API页面")
        }
    }
}

struct SearchableDemo_Previews: PreviewProvider {
    static var previews: some View {
        NavigtionViewDemo()
    }
}
content_copyCOPY