SwiftUI NavigationStack&NavigationSplitView 合集

NavigationStack

跳转的几种方式

struct NavigationLinkView: View {
    @State private var path: NavigationPath = .init()
    @State private var isPresented: Bool = false
    @State private var items: [Item] = [Item(text: "ForEach 中跳转")]
    var body: some View {
        // 使用 NavigationLink 会导致组件多一个箭头
        NavigationStack(path: $path) {
            List {
                NavigationLink("跳转方式一") {
                    // destination
                }
                NavigationLink("跳转方式一", destination: {
                    // destination
                })
                NavigationLink(destination: {
                    // destination
                }, label: {
                    LabeledContent("跳转方式", value: "一")
                })
                
                Button(action: {
                    isPresented.toggle()
                }, label: {
                    Text("跳转方式二")
                })
                
                NavigationLink("跳转方式三", value: "3&4")
                
                Button(action: {
                    path.append("3&4")
                }, label: {
                    Text("跳转方式四")
                })
                
                // ForEach 跳转方式一
                ForEach(items) { item in
                    NavigationLink(value: item) {
                        Text(item.text)
                    }
                }
                
                // ForEach 跳转方式二
                ForEach(items) { item in
                    Text(item.text)
                        .onTapGesture {
                            path.append(item)
                        }
                }
                
            }
        }
        // 跳转方式二
        .navigationDestination(isPresented: $isPresented) {
            // destination
        }
        
        // 跳转方式三 & 四
        .navigationDestination(for: String.self) { destination in
            if destination == "3&4" {
                // destination
            }
        }
        
        // ForEach 跳转
        .navigationDestination(for: Item.self) { item in
            // destination
        }
    }
}

struct Item: Identifiable, Hashable {
    let id = UUID()
    let text: String
}

隐藏 NavigationLink 的箭头

常规手段

List {
    Text("The cell")
        .background(	// 使用 overlay 也可以
            NavigationLink(value: item) {
            	EmptyView()
            }.opacity(0)
        )
}

// 或者

List {
    ZStack {
        NavigationLink(value: item) {
            EmptyView()
        }.opacity(0)
        Text("The cell")
    }
}