SwiftUI中List穿透显示在TabView后方如何解决

问题现象：List滚动到底部时，列表内容会从底部TabBar区域透出来

问题根因 #

你之前修改的是UINavigationBar（顶部导航栏）的不透明配置，和底部TabView透显问题完全无关。iOS 15及以上版本中，系统默认给UITabBar配置了半透明毛玻璃效果，List这类滚动视图默认会延伸到页面所有边缘的安全区域外，当列表滚动到底部时，内容就会从半透明的TabBar下方透出来，和你看到的效果一致。

修复方案 #

两种方案二选一即可：

• 方案1：全局配置TabBar为不透明（推荐）
  和你之前配置导航栏的逻辑一致，直接补充UITabBar的不透明外观配置即可，全局生效，适配所有Tab分页。把你原来写的外观配置代码替换为如下内容：

  if #available(iOS 15, *) {
      // 原有导航栏不透明配置保留
      let navAppearance = UINavigationBarAppearance()
      navAppearance.configureWithOpaqueBackground()
      UINavigationBar.appearance().standardAppearance = navAppearance
      UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
  
      // 新增底部TabBar不透明配置
      let tabBarAppearance = UITabBarAppearance()
      tabBarAppearance.configureWithOpaqueBackground()
      // 如需自定义TabBar背景色，可打开下面这行修改
      // tabBarAppearance.backgroundColor = .systemBackground
      UITabBar.appearance().standardAppearance = tabBarAppearance
      UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
  }
  

• 方案2：单页面限制List延伸范围
  如果不想修改全局TabBar样式，只需要让当前页面的List不延伸到TabBar下方即可，给List加底部安全区内边距：
  找到你代码中的List控件，新增如下修饰符：

  List(caseList.indices, id: \.self) { index in
      // 原有的List行内容代码保持不变
  }
  .listStyle(InsetGroupedListStyle())
  // 给列表底部加等于TabBar高度的内边距，避免内容钻到TabBar下面
  .safeAreaInset(edge: .bottom) {
      Color.clear.frame(height: UITabBarController().tabBar.frame.height)
  }
  

额外代码修正 #

你当前代码里的.navigationTitle("Cases")挂载位置错误，现在是写在NavigationView的外层修饰符上，会导致导航栏标题配置不生效，需要把这个修饰符移到NavigationView内部的根子视图（也就是你包裹GroupBox和List的VStack）上。

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