SwiftUI 的 NavigationView 的使用代码演示

22 min read

以下是 SwiftUI 中 NavigationView 的使用示例代码:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, World!")
                    .font(.title)
                    .foregroundColor(.blue)

                Spacer()

                NavigationLink(destination: DetailView()) {
                    Text("Go to detail")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(10)
                }
            }
            .padding()
            .navigationBarTitle("Main", displayMode: .inline)
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text("Detail View")
                .font(.title)

            Spacer()
        }
        .padding()
        .navigationBarTitle("Detail", displayMode: .inline)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在此示例中,我们使用 NavigationView 包装 VStack,并使用 Spacer 将文本对齐到顶部和底部。

我们还添加了一个 NavigationLink,该链接将用户引导到详细视图。当用户点击链接时,导航视图将自动转到新的详细视图。在详细视图中,我们添加了一个文本框和 Spacer

使用 navigationBarTitle 可以设置导航栏标题和显示模式。在此示例中,我们设置了 displayMode.inline