直接看代码案例快速入手SwiftUI

本文介绍NavigationView，TabView。

🎉下载GitHub仓库，直接体验

NavigationView

struct NavigationViewContentView: View {
    struct DetailView: View {
        let title: String

        var body: some View {
            Text(title)
        }
    }

    var body: some View {
        NavigationView {
            Text("Main page")
                .navigationBarTitle("Navigation title", displayMode: .inline)
        }

        NavigationView {
            VStack {
                Text("Main page")

                NavigationLink(destination: Text("Detail page")) {
                    Text("Click to view details")
                }
            }
            .navigationBarTitle("Navigation title")
        }

        NavigationView {
            List(1 ... 10, id: \.self) { index in
                NavigationLink(destination: DetailView(title: "Detail page \(index)")) {
                    Text("Item \(index)")
                }
            }
            .navigationBarTitle("Navigation title")
        }

        NavigationView {
            Text("Main page")
                .navigationBarTitle("Navigation title")
                .navigationBarItems(leading: Button(action: {
                    print("plus button clicked")
                }) {
                    Image(systemName: "plus")
                }, trailing: Button(action: {
                    print("ellipsis button clicked")
                }) {
                    Image(systemName: "ellipsis.circle")
                })
        }

        NavigationView {
            Text("Main page")
                .navigationTitle("Navigation title")
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button(action: {
                            print("plus button clicked")
                        }) {
                            Image(systemName: "plus")
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button(action: {
                            print("ellipsis button clicked")
                        }) {
                            Image(systemName: "ellipsis.circle")
                        }
                    }
                }
        }
    }
}

struct NavigationViewContentView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationViewContentView()
    }
}

TabView

struct TabViewContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView {
            Text("Home page")
                .tabItem {
                    Label("Home page", systemImage: "house")
                }
                .tag(0)

            Text("Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
                .tag(1)
        }

        TabView(selection: $selectedTab) {
            Text("Home page")
                .tabItem {
                    Label("Home page", systemImage: "house")
                }
                .tag(0)

            Text("Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
                .tag(1)
        }

        TabView {
            NavigationView {
                Text("Home page")
                    .navigationTitle("Home page")
            }
            .tabItem {
                Label("Home page", systemImage: "house")
            }
            .tag(0)

            NavigationView {
                Text("Settings")
                    .navigationTitle("Settings")
            }
            .tabItem {
                Label("Settings", systemImage: "gear")
            }
            .tag(1)
        }

        TabView {
            Text("Home page")
                .tabItem {
                    Label("Home page", systemImage: "house")
                }
                .tag(0)

            Text("Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
                .tag(1)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

        TabView {
            VStack {
                HStack {
                    Text("Text 1")
                    Text("Text 2")
                }
                Text("Text 3")
            }
            .tabItem {
                Label("tab 1", systemImage: "star")
            }
            .tag(0)

            ZStack {
                Color.blue
                Text("label 2 content")
            }
            .tabItem {
                Label("tab 2", systemImage: "circle")
            }
            .tag(1)
        }
    }
}

struct TabViewContentView_Previews: PreviewProvider {
    static var previews: some View {
        TabViewContentView()
    }
}