Xcode 14 Beta 6下SwiftUI导航栏过高（双层堆叠）问题求助

我正在使用Xcode 14 Beta 6开发，从首页跳转至目标页面后，导航栏出现高度异常，看起来像是堆叠了两层。

问题截图：

相关代码 #

ProductsLink 代码 #

import SwiftUI

struct ProductsLink: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    
    var btnBack : some View { Button(action: {
        self.presentationMode.wrappedValue.dismiss()
    }) {
        HStack {
            Image(systemName: "arrow.backward.circle")
                .aspectRatio(contentMode: .fit)
                .foregroundColor(Color("LaunchText"))
        }
    }
    }
    
    var body: some View {
        Products(text: "All Products")
            .navigationBarItems(leading: btnBack)
            .navigationBarBackButtonHidden()
    }
}


struct ProductsLink_Previews: PreviewProvider {
    static var previews: some View {
        ProductsLink()
        
    }
}

ContentView 代码 #

import SwiftUI

struct ContentView: View {
    @State private var selection = 1
    init() {
        UITabBar.appearance().backgroundColor = .systemBackground
    }
    var body: some View {
        
        TabView(selection: $selection) {
            Home()
            .tabItem { Label("Home", systemImage: "house.fill") }.tag(1)
            About()
            .tabItem { Label("About", systemImage: "person.crop.circle") }.tag(2)
            Products()
            .tabItem { Label("Products", systemImage: "bag.fill") }.tag(3)
            Gallery()
            .tabItem { Label("Gallery", systemImage: "photo.on.rectangle") }.tag(4)
            Contact()
            .tabItem { Label("Contact", systemImage: "phone.bubble.left.fill") }.tag(5)
            
            
        }
        .accentColor(Color("Green Power Logo Colour"))
        
    }
}

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

Products 代码 #

struct Products: View {
    var text = "Products"
    var body: some View {
            NavigationView {
                ScrollView {
                AllProductCards
                    NavigationLink(destination: ContactForm()) {
                            HStack {
                                Text("Intrested. Contact Form \(Image(systemName: "arrow.forward.circle"))")
                                    .foregroundColor(.white)
                            } .frame(width: 250 ,height: 50)
                                .background(Color("Dark Green"))
                                .cornerRadius(7)
                        }
                    Footer()
            }
                .navigationTitle(text)
        }.navigationViewStyle(StackNavigationViewStyle())
        
    }
}

struct Products_Previews: PreviewProvider {
    static var previews: some View {
        Products()
        
    }

}

原因 #

导航栏堆叠是因为嵌套了多层NavigationView：

• Products 内部已经包含完整的 NavigationView 结构
• ProductsLink 又在外层添加导航栏按钮，相当于在已有导航栏之上再叠加一层导航栏元素，导致视觉上出现两层堆叠的效果。

解决步骤 #

1. 移除ProductsLink中的导航栏修饰符
   因为Products自身已经有导航视图，不需要在外层重复设置导航栏：

// 修改ProductsLink的body部分
var body: some View {
    Products(text: "All Products")
}

2. 将自定义返回按钮移到Products内部
   如果需要自定义返回按钮，直接在Products的NavigationView层级里配置：

struct Products: View {
    var text = "Products"
    @Environment(\.presentationMode) var presentationMode
    
    var btnBack : some View { 
        Button(action: {
            presentationMode.wrappedValue.dismiss()
        }) {
            HStack {
                Image(systemName: "arrow.backward.circle")
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(Color("LaunchText"))
            }
        }
    }
    
    var body: some View {
        NavigationView {
            ScrollView {
                AllProductCards
                NavigationLink(destination: ContactForm()) {
                    HStack {
                        Text("Intrested. Contact Form \(Image(systemName: "arrow.forward.circle"))")
                            .foregroundColor(.white)
                    } .frame(width: 250 ,height: 50)
                        .background(Color("Dark Green"))
                        .cornerRadius(7)
                }
                Footer()
            }
            .navigationTitle(text)
            .navigationBarItems(leading: btnBack)
            .navigationBarBackButtonHidden()
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

3. 检查全局导航结构
   确保首页的TabView没有额外嵌套NavigationView，整个导航流只保留一个根NavigationView即可。

注意 #

SwiftUI中多层嵌套NavigationView是常见的导航异常诱因，尤其是在Xcode Beta版本中表现更明显，保持导航结构扁平化能避免这类问题。

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