如何为现有SwiftUI教程示例代码添加带标题的导航栏

你只需对现有代码做两处调整即可添加带标题的导航栏：

1. 将body中最外层的VStack嵌套进NavigationStack容器（iOS 16及以上版本适用，iOS 15及更低版本可替换为NavigationView）
2. 为VStack添加navigationTitle修饰符设置导航栏标题，可搭配navigationBarTitleDisplayMode调整标题显示样式（大标题/inline标准样式）

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    var emojis = ["🚂", "🚀", "🚁", "🚜", "🛸", "🛳", "🚗", "🏎", "🚲", "✈️", "🦽", "🏍", "🚌", "🚚", "🛺", "🚤", "⛵️", "🚔", "🛴", "🚐", "🚓", "🛻", "🚇", "🛰"]
    
    @State var emojiCount = 20
    
    var body: some View {
        NavigationStack { // 新增导航容器
            VStack {
                ScrollView {
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
                        ForEach(emojis[0..<emojiCount], id: \.self) { emoji in
                            CardView(content: emoji).aspectRatio(2/3, contentMode: .fit)
                        }
                    }
                }
                .foregroundColor(.red)
                Spacer()
                HStack {
                    remove
                    Spacer()
                    add
                }
                .font(.largeTitle)
                .padding(.horizontal)
            }
            .padding(.horizontal)
            .navigationTitle("交通工具卡牌") // 自定义导航栏标题
            .navigationBarTitleDisplayMode(.inline) // 可选：去掉该行默认显示大标题
        }
    }

    var remove: some View {
        Button {
            if emojiCount > 1 {
                emojiCount -= 1
            }
        } label: {
            Image(systemName: "minus.circle")
        }
    }

    var add: some View {
        Button {
            if emojiCount < emojis.count {
                emojiCount += 1
            }
        } label: {
            Image(systemName: "plus.circle")
        }
    }
}

struct CardView: View {
    var content: String
    @State var isFaceUp: Bool = true
    
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20.0)
            if isFaceUp {
                shape.fill().foregroundColor(.white)
               shape.strokeBorder(lineWidth: 3.0)
                Text(content).font(.largeTitle)
            } else {
                shape.fill()
            }
        }
        .onTapGesture {
            isFaceUp = !isFaceUp
        }
    }
}

补充说明 #

如果需要兼容iOS 15及更早系统版本，仅需把代码中的NavigationStack替换为NavigationView即可，其余逻辑保持不变。

内容的提问来源于stack exchange，提问作者dwaynedlv