在ToolbarItem中添加Menu导致SwiftUI构建失败求助

问题根源 #

你遇到的错误提示具有误导性，真正的问题并非Menu或ToolbarItem本身，而是NavigationStack的根视图存在多个并列的直接子视图。在你的代码中，NavigationStack下直接放置了三个独立视图：两个if分支的Text，以及ScrollViewReader。SwiftUI要求容器视图（如NavigationStack）只能有一个直接子视图，这种多子视图的写法在部分场景下（比如未添加复杂视图时）可能暂时不报错，但当引入Menu这类带有复杂类型的视图时，会触发SwiftUI的类型推断冲突，从而抛出看似和ToolbarItem相关的错误。

解决步骤 #

将NavigationStack内的所有内容用Group或VStack（根据布局需求选择）包裹，确保NavigationStack只有一个直接子视图：

修改后的核心代码示例 #

var body: some View {
    NavigationStack {
        // 用Group包裹所有根视图内容，不改变原有布局
        Group {
            if selectedView == "Week" {
                Text("Week view")
            }
            if selectedView == "Month" {
                Text("Month view")
            }
            ScrollViewReader { scrollView in
                ScrollView {
                    ListView()
                }
                .overlay(alignment: .bottomTrailing) {
                    Button {
                        scrollView.scrollTo(goToDate, anchor: .top)
                    } label: {
                        Text("Go to today")
                    }
                }
            }
        }
        // 后续修饰符保持不变
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            // 原有ToolbarItem保留
            ToolbarItem(placement: .principal) {
                VStack {
                    Text("Title")
                        .font(.headline)
                    if syncTime != "a moment ago" {
                        HStack(spacing: 3) {
                            Text("Last sync:")
                            Text(syncTime)
                        }
                    } else {
                        Text("Up to date")
                    }
                }
            }
            ToolbarItem(placement: .topBarLeading) {
                Button(action: {
                    showProfileSheet.toggle()
                }) {
                    Image("profile")
                }
                .sheet(isPresented: $showProfileSheet) {
                    ProfileModal(isPresented: $showProfileSheet)
                        .presentationDetents([.medium, .large])
                        .presentationDragIndicator(.hidden)
                }
            }
            ToolbarItem(placement: .topBarTrailing) {
                Button {
                    showExportSheet.toggle()
                } label: {
                    Image(systemName: "square.and.arrow.up")
                }
                .sheet(isPresented: $showExportSheet) {
                    ExportModal(isPresented: $showExportSheet)
                        .presentationDetents([.medium, .large])
                }
            }
            // 取消注释Menu的ToolbarItem，现在不会报错
            ToolbarItem(placement: .topBarTrailing) {
                Menu {
                    Button {
                        // Request update action
                    } label: {
                        Label("Sync now", systemImage: "arrow.triangle.2.circlepath")
                        // 修正原代码中systemImage的拼写错误
                    }
                    // 更多按钮/选项
                } label: {
                    Label("Options", systemImage: "ellipsis")
                }
            }
        }
    }
}

额外注意点 #

• 原代码中Menu按钮的systemImage存在拼写错误：arrow.triangle.2.ciclepath应改为arrow.triangle.2.circlepath，修正后才能正确显示系统图标。
• 使用Group仅用于合并视图，不会改变原有布局；如果需要垂直排列视图，可以改用VStack并设置合适的间距。

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