SwiftUI问题：点击NavigationLink后底部工具栏背景残留

在带有Toolbar的NavigationView中，设置了.bottomBar位置的ToolbarItem和搜索框，NavigationView内的ScrollView内容高度超出屏幕，底部栏带有背景。点击“Root View”跳转至详情页后，底部工具栏的背景未按预期消失。只有移除搜索框或者缩小ScrollView高度时，该问题才不会出现。

复现代码 #

struct BugView: View {
    @State var searchPattern: String = ""
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    NavigationLink(destination: Text("Detail View")) {
                        Text("Root View").foregroundColor(Color.blue)
                    }
                    Spacer()
                    Text("Root View Bottom").foregroundColor(Color.blue)
                }.frame(maxWidth: .infinity, minHeight: 1000)
            }
                .searchable(text: self.$searchPattern, prompt: "Search Here")
                .toolbar(content: {
                    ToolbarItem(placement: .bottomBar) {
                        Text("Toolbar text")
                    }
                })
           }
   }
}

环境配置：Xcode 13.4.1，iPhone 13模拟器

解决方案 #

这是Xcode 13.x版本中SwiftUI的已知布局bug，以下是几种可行的修复方式：

• 显式在详情页隐藏底部工具栏
  给详情页添加.toolbar(.hidden, for: .bottomBar)修饰符，强制隐藏底部工具栏：

  NavigationLink(destination: Text("Detail View")
      .toolbar(.hidden, for: .bottomBar)) {
      Text("Root View").foregroundColor(Color.blue)
  }
  

• 调整ScrollView的高度约束
  避免给ScrollView内部的VStack设置固定的minHeight:1000，改用基于屏幕高度的动态约束，或者移除固定高度让内容自然撑开：

  // 改用动态高度示例
  .frame(maxWidth: .infinity, minHeight: UIScreen.main.bounds.height * 2)
  

• 通过状态变量控制工具栏显示
  在父视图中添加状态变量，跳转详情页时隐藏底部工具栏，返回时恢复：

  struct BugView: View {
      @State var searchPattern: String = ""
      @State private var showBottomBar = true
      
      var body: some View {
          NavigationView {
              ScrollView {
                  VStack {
                      NavigationLink(destination: Text("Detail View")
                          .onAppear { showBottomBar = false }
                          .onDisappear { showBottomBar = true }) {
                          Text("Root View").foregroundColor(Color.blue)
                      }
                      Spacer()
                      Text("Root View Bottom").foregroundColor(Color.blue)
                  }.frame(maxWidth: .infinity, minHeight: 1000)
              }
              .searchable(text: $searchPattern, prompt: "Search Here")
              .toolbar {
                  ToolbarItem(placement: .bottomBar) {
                      if showBottomBar {
                          Text("Toolbar text")
                      }
                  }
              }
          }
      }
  }
  

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