SwiftUI多NavigationView导致重复工具栏按钮的解决方法

我正在开发一款SwiftUI应用，用户首先看到带按钮的首页，点击按钮进入二级视图。其中一个二级视图是项目列表，点击列表项进入详情视图时，工具栏左侧出现两个返回按钮。

我知道用单个NavigationView能解决，但列表视图需要通过ToolbarItem实现添加项目、排序列表和搜索功能，没有NavigationView没法实现这些。试过用ScrollView和NavigationStack，但页面显示空白。

请问如何在多视图场景下避免工具栏出现重复返回按钮，同时保留其他工具栏功能？

首页代码 #

NavigationView {
    ZStack {
        VStack {
            Text(title)
                .font(.custom("Glacial Indifference", size: 34, relativeTo: .headline).weight(.bold))
                .multilineTextAlignment(.leading)
                .foregroundColor(.white)
                .tracking(10)
                .padding(8)
                .background(
                    Rectangle()
                        .fill(.gray)
                        .frame(width: 1000, height: 150)
                        .ignoresSafeArea()
                        .opacity(0.5))
            Spacer()
        }
        VStack {
            NavigationLink {
                MapView()
            } label: {
                Buttons(str: "Cheese Map")
            }
            .padding(.bottom, 200)
        }
        VStack {
            NavigationLink {
                TabView()
            } label: {
                Buttons(str: "Cheese List")
            }
            .padding(.bottom, 400)
        }

列表视图代码 #

NavigationView {
    List {
        ForEach(items, id: \.id) { item in
            NavigationLink {
                ItemView(item: item)
            } label: {
                ListItem(item: item)
            }
        }
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Button {
                showingAddItem = true
            } label: {
                Image(systemName: "plus")
                Text("Add Item")
                    .font(.footnote)
                    .italic()
            }
        }
    }
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Menu("Sort") {
                Picker("Filter Options", selection: $selectedSort) {
                    ForEach(sortOptions, id: \.self) {
                        value in
                        Text(value)
                            .tag(value)
                    }
                }
            }
            .onChange(of: selectedSort) { _ in
                let sortBy = sorts[sortOptions.firstIndex(of: selectedSort)!]
                items.sortDescriptors = sortBy.descriptors
            }
        }
    }
    .sheet(isPresented: $showingAddItems) {
        AddItemsView(items: Items())
    }
    .navigationTitle("Item List")
    
    .searchable(text: $searchText)
}
}
}

详情视图代码 #

ScrollView {
    ZStack {
        VStack {
//More code...

核心问题：嵌套NavigationView导致重复返回按钮 #

问题根源是首页和列表视图都嵌套了NavigationView，每一层NavigationView都会生成自己的导航栏和返回按钮，进入详情页时就会叠加显示两个返回按钮。

正确实现方式：单一导航容器 + 层级导航 #

1. 只在根视图（首页）保留一个导航容器

SwiftUI的导航体系要求整个应用只有一个根导航容器，后续视图通过NavigationLink自然加入导航栈，不需要再嵌套导航容器。如果是iOS 16+，推荐用NavigationStack替代旧的NavigationView，兼容性更好。

2. 列表视图移除NavigationView，直接保留Toolbar等功能

Toolbar、searchable、navigationTitle这些修饰符不需要依赖当前视图包裹在NavigationView里，只要该视图处于导航栈中（即被NavigationLink推入），就能正常生效。

修改后的列表视图代码：

List {
    ForEach(items, id: \.id) { item in
        NavigationLink {
            ItemView(item: item)
        } label: {
            ListItem(item: item)
        }
    }
}
.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button {
            showingAddItem = true
        } label: {
            Image(systemName: "plus")
            Text("Add Item")
                .font(.footnote)
                .italic()
        }
    }
    ToolbarItem(placement: .navigationBarTrailing) {
        Menu("Sort") {
            Picker("Filter Options", selection: $selectedSort) {
                ForEach(sortOptions, id: \.self) { value in
                    Text(value)
                        .tag(value)
                }
            }
        }
        .onChange(of: selectedSort) { _ in
            let sortBy = sorts[sortOptions.firstIndex(of: selectedSort)!]
            items.sortDescriptors = sortBy.descriptors
        }
    }
}
.sheet(isPresented: $showingAddItems) {
    AddItemsView(items: Items())
}
.navigationTitle("Item List")
.searchable(text: $searchText)

3. 解决NavigationStack空白问题

如果用NavigationStack替代NavigationView出现空白，检查：

• 确保根视图正确包裹NavigationStack，且内部有完整的可显示内容（比如首页的ZStack要闭合完整）
• 列表视图作为NavigationLink的目标时，不要嵌套NavigationStack
• 根视图使用NavigationStack的示例写法：

NavigationStack {
    // 首页完整内容
    ZStack {
        // ... 原首页代码
    }
}

4. 详情视图无需额外处理

详情视图只要被NavigationLink推入导航栈，会自动继承根导航容器的导航栏，显示正确的单个返回按钮，ScrollView可以保留用于滚动内容，不需要额外嵌套导航容器。

最终效果 #

• 首页作为根导航容器，点击按钮进入列表视图后，列表的Toolbar、搜索、排序功能正常显示
• 点击列表项进入详情视图，工具栏仅显示一个返回按钮
• 整个导航体系层级清晰，无重复导航元素

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