如何在SwiftUI中动态修改.toolbar修饰符的工具栏项

直接在.toolbar修饰符闭包内编写返回不同ToolbarContent类型的if/else分支会触发编译错误，核心原因是SwiftUI的ToolbarContentBuilder处理条件分支时，要求不同分支返回的内容类型完全一致。示例代码中两个分支返回的是绑定了不同placement参数的ToolbarItemGroup，属于不同的具体类型，无法被自动推断为统一类型，因此编译失败。

方案1：通用类型擦除方案（支持所有iOS版本） #

使用AnyToolbarContent对两个分支的工具栏内容做类型擦除，保证分支返回类型统一即可正常编译，修改后的代码如下：

@State private var flag = false

var body: some View {
    // 你的其他视图代码
    NavigationStack {
        Text("Demo Page")
            .toolbar {
                if flag {
                    AnyToolbarContent(
                        ToolbarItemGroup(placement: .principal) {
                            Text("Something full width")
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                        }
                    )
                } else {
                    AnyToolbarContent(
                        ToolbarItemGroup(placement: .navigationBarTrailing) {
                            Button("Something else") {
                                // 按钮点击逻辑
                            }
                        }
                    )
                }
            }
    }
}

如果需要切换工具栏时获得平滑过渡效果，可以把flag的赋值逻辑包裹在withAnimation闭包中。

方案2：iOS 16+/macOS 13+ 原生支持方案 #

从iOS 16开始，苹果优化了ToolbarContentBuilder的实现，只需要给每个条件分支内的工具栏组设置唯一的id标识，不需要类型擦除也可以正常编译：

@State private var flag = false

var body: some View {
    NavigationStack {
        Text("Demo Page")
            .toolbar {
                if flag {
                    ToolbarItemGroup(placement: .principal, id: "principalGroup") {
                        Text("Something full width")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                    }
                } else {
                    ToolbarItemGroup(placement: .navigationBarTrailing, id: "trailingGroup") {
                        Button("Something else") {
                            // 按钮点击逻辑
                        }
                    }
                }
            }
    }
}

方案3：拆分写法（兼容全版本，逻辑更直观） #

不需要写if/else分支，直接定义两个独立的工具栏组，通过状态值动态控制它们的放置位置，不需要显示的组放到.hidden放置位即可，这种写法在老版本系统中也能稳定运行：

@State private var flag = false

var body: some View {
    NavigationStack {
        Text("Demo Page")
            .toolbar {
                ToolbarItemGroup(placement: flag ? .principal : .hidden) {
                    Text("Something full width")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
                ToolbarItemGroup(placement: flag ? .hidden : .navigationBarTrailing) {
                    Button("Something else") {
                        // 按钮点击逻辑
                    }
                }
            }
    }
}

提示：放置到.hidden位置的工具栏项不会在界面上渲染显示，非常适合这类动态切换场景。

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