SwiftUI NavigationStack 与 NavigationSplitView 合集

NavigationStack

SwiftUI 4.0 的全新导航系统

使用 SwiftUI 的 NavigationStack 组件进行页面导航

改变颜色

SwiftUI navigation bar 的背景顏色

SwiftUI changing navigation bar background color for inline navigationBarTitleDisplayMode

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Item 1")
                Text("Item 2")
                // ... more content
            }
            .navigationTitle("My List")
            .toolbarBackground(
                Color.blue, // The desired background color or ShapeStyle
                for: .navigationBar // Applies the style to the navigation bar
            )
            .toolbarBackgroundVisibility(.visible, for: .navigationBar) // Ensures the background is always visible
        }
    }
}

跳转的几种方式

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")
    }
}

非常规手段，使用 .navigationLinkIndicatorVisibility(.hidden)，参考：

隱藏 & 顯示向右箭頭的 navigationLinkIndicatorVisibility

navigationLinkIndicatorVisibility(_:)

但不知道为什么，反正我用不了。

NavigationSplitView

1. NavigationStack inside NavigationSplitView detail in SwiftUI

隐藏 NavigationSplitView 的 detail

NavigationSplitView {
    Text("Sidebar")
} content: {
    Text("Content")
} detail: {
    if detailViewVisible {
        Text("Detail")
    } else {
        Spacer()
            .navigationSplitViewColumnWidth(0)
    }
}