SwiftUI自定义多行工具栏返回后显示被裁剪的问题修复咨询

嗨，我之前也碰到过这个问题！这种情况通常是因为NavigationView在从详情页返回时，没有正确计算多行工具栏的高度，导致布局被裁剪。下面给你几个经过验证的修复方案，你可以根据自己的iOS版本需求选择：

• 方案一：给工具栏的VStack设置明确的最小高度
  通过给工具栏里的VStack添加固定的最小高度，强制布局系统预留足够的空间，避免返回时高度计算错误。你可以根据自己的字体大小调整这个数值：

  var multilineToolbar: some ToolbarContent {
      ToolbarItem(placement: .principal) {
          VStack {
              Text("Line 1")
                  .font(.largeTitle)
              Text("Line 2")
                  .font(.title2)
          }
          .frame(minHeight: 60) // 调整为适合你布局的最小高度
      }
  }
  

• 方案二：设置导航栏标题显示模式为inline
  默认的导航栏标题模式可能会让布局系统对工具栏高度的计算出现偏差，设置成.inline可以让整个导航栏的布局更稳定：

  struct ContentView: View {
      var body: some View {
          NavigationView {
              // 你的List内容...
          }
          .navigationBarTitleDisplayMode(.inline) // 添加这一行
      }
  
      // 你的toolbar代码...
  }
  

• 方案三：iOS16+ 使用NavigationStack替代NavigationView
  NavigationView在iOS16之后已经被标记为过时组件，NavigationStack拥有更稳定的布局逻辑，能从根源上避免这类旧组件的bug。如果你的项目只需要支持iOS16及以上版本，这是最推荐的解决方案：

  struct ContentView: View {
      var body: some View {
          NavigationStack { // 替换NavigationView为NavigationStack
              List {
                  Section {
                      ForEach(0..<10) { index in
                          NavigationLink(destination: DetailView()) {
                              Text("Row \(index+1)")
                          }
                      }
                  }
              }
              .scrollContentBackground(.hidden)
              .background(Color.blue)
              .toolbar { multilineToolbar }
          }
      }
  
      var multilineToolbar: some ToolbarContent {
          ToolbarItem(placement: .principal) {
              VStack {
                  Text("Line 1")
                      .font(.largeTitle)
                  Text("Line 2")
                      .font(.title2)
              }
          }
      }
  }
  

如果你的项目需要兼容iOS15及以下版本，优先尝试前两个方案；如果只需要支持iOS16+，第三个方案是最彻底的解决方式，还能避免其他潜在的导航布局问题。

内容来源于stack exchange