SwiftUI中含ForEach的Toolbar在视图变更时消失的问题

问题根源 #

这是SwiftUI处理动态Toolbar内容时的布局状态异常问题，属于框架小bug，并非不支持动态Toolbar按钮的特性。主视图内容变更时，动态生成的Toolbar元素会丢失布局上下文，直到滚动触发视图重新计算布局才恢复显示。

具体解决办法 #

• 给ForEach添加明确标识
  确保SwiftUI能准确追踪Toolbar中的动态元素，要么让数据源遵循Identifiable协议，要么在ForEach中指定id参数：

  // 定义遵循Identifiable的动作结构体
  struct ToolbarAction: Identifiable {
      let id = UUID()
      let title: String
      let handler: () -> Void
  }
  
  // 在Toolbar中使用
  ToolbarItemGroup(placement: .navigationBarTrailing) {
      ForEach(toolbarActions) { action in
          Button(action.title) {
              action.handler()
          }
      }
  }
  

• 将Toolbar内容封装为独立子视图
  把动态按钮的生成逻辑抽成单独子视图，让SwiftUI更稳定地管理其渲染状态，避免主视图变更影响Toolbar：

  struct DynamicToolbarButtons: View {
      let actions: [ToolbarAction]
      
      var body: some View {
          HStack(spacing: 16) {
              ForEach(actions) { action in
                  Button(action.title) {
                      action.handler()
                  }
              }
          }
      }
  }
  
  // 主视图中调用
  ToolbarItem(placement: .navigationBarTrailing) {
      DynamicToolbarButtons(actions: toolbarActions)
  }
  

• 稳定Toolbar数据源的状态管理
  使用@State或@ObservedObject管理Toolbar动作数组，确保只有数组本身变更时才更新Toolbar，避免主视图其他内容更新触发不必要的Toolbar重绘：

  struct MainView: View {
      @State private var toolbarActions: [ToolbarAction] = [
          ToolbarAction(title: "添加", handler: { /* 执行添加操作 */ }),
          ToolbarAction(title: "编辑", handler: { /* 执行编辑操作 */ })
      ]
      @State private var showRedRect = false
      
      var body: some View {
          NavigationStack {
              ScrollView {
                  VStack {
                      Button("显示红色矩形") {
                          showRedRect.toggle()
                      }
                      if showRedRect {
                          Color.red.frame(width: 200, height: 200)
                      }
                  }
              }
              .toolbar {
                  DynamicToolbarButtons(actions: toolbarActions)
              }
          }
      }
  }
  

• 使用ToolbarItemGroup替代单个ToolbarItem
  将动态按钮放在ToolbarItemGroup中，能让SwiftUI更好地处理布局上下文，减少消失概率：

  .toolbar {
      ToolbarItemGroup(placement: .navigationBarTrailing) {
          ForEach(toolbarActions) { action in
              Button(action.title) {
                  action.handler()
              }
          }
      }
  }
  

总结 #

通过以上方法，能让动态生成的Toolbar按钮保持始终可见，无需硬编码每个按钮。核心思路是增强SwiftUI对Toolbar动态元素的识别能力，隔离Toolbar的渲染状态，规避框架的布局异常。

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