如何在 SwiftUI 中使用 NavigationView 和 NavigationLink？答案

【问题标题】：How to use NavigationView and NavigationLink in SwiftUI?如何在 SwiftUI 中使用 NavigationView 和 NavigationLink？
【发布时间】：2020-11-05 15:08:39
【问题描述】：

我为在 Playground 中运行的这个问题编写的一段代码：

import SwiftUI

struct Player {
    let name: String
    let surname: String
}

struct DetailView2: View {
    var player: Player
    var body: some View {
        Text("\(player.name) \(player.surname)")
    }
}

struct PlaygroundView: View {
    // MARK: - Propertiers
    @State private var selection = 0
    private var players = [
        Player(name: "Lionel", surname: "Messi"),
        Player(name: "Diogo", surname: "Jota"),
    ]
    
    // MARK: - View
    var body: some View {
        TabView(selection: $selection) {
            NavigationView {
                VStack {
                    Text("Settings").font(.title)
                    List(0..<players.count, id: \.self) { index in
                        NavigationLink(destination: DetailView2(player: players[index])) {
                            Text("\(index)")
                        }
                    }
                }
                .navigationTitle("Players")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarHidden(true)
            }
            .background(Color.white)
            .tabItem {
                Image(systemName: "house.fill")
                Text("Players")
            }
            .tag(0)
            
            VStack {
                Text("Settings").font(.title)
                List(0..<2, id: \.self) { index in
                    Text("#\(index)")
                }
            }
            .tabItem {
                Image(systemName: "book.fill")
                Text("Foo")
            }
            .tag(1)
        }
    }
}

struct Playground_Previews: PreviewProvider {
    static var previews: some View {
        PlaygroundView()
    }
}

当前玩家栏：

当前设置栏：

如何修复代码，使“玩家”栏看起来像设置栏（它是标题样式的术语）。似乎我已经让标签项和导航工作了。

【问题讨论】：

你需要设置一个navigationBarTitle。我建议您先阅读一下：hackingwithswift.com/articles/216/…
@ClausJørgensen 感谢您的链接！实际上我不想设置navigationBarTitle，因为我想为标题使用自定义格式（例如，将其居中到顶部而不进行前导对齐）。
在内容下方使用VStack 和Spacer()（否则会居中）
@ClausJørgensen 你能再看看吗？看完这篇文章，我有了一些进步，只剩下一个小问题了。

标签： ios swift swiftui

【解决方案1】：

看起来你看起来像下面的东西（使用 Xcode 12.1 / iOS 14.1 准备和测试）

var body: some View {
    TabView(selection: $selection) {
         VStack {
            Text("Settings").font(.title)

            NavigationView {
                List(0..<players.count, id: \.self) { index in
                    NavigationLink(destination: DetailView2(player: players[index])) {
                        Text("\(index)")
                    }
                }
                     .navigationBarTitleDisplayMode(.inline)
                     .navigationBarHidden(true)
            }
        }
        .background(Color.white)
        .tabItem {
            Image(systemName: "house.fill")
            Text("Players")
        }
        .tag(0)
        
        VStack {
            Text("Settings").font(.title)
            List(0..<2, id: \.self) { index in
                Text("#\(index)")
            }
        }
        .tabItem {
            Image(systemName: "book.fill")
            Text("Foo")
        }
        .tag(1)
    }
}

【讨论】：