SwiftUI中List触碰到TabBar时TabBar变透明问题求助

问题原因 #

在iOS 15中，SwiftUI的TabView默认带有滚动边缘交互优化：当内部滚动容器（比如List）滚动至底部触及TabBar时，系统会自动将TabBar切换为透明状态，以此提升滚动视觉体验。即使你通过UIKit的UITabBar.appearance()设置了isTranslucent = false，SwiftUI的TabView仍会优先使用自身布局逻辑，导致TabBar出现透明现象。

解决方案 #

方案1：用SwiftUI原生修饰符强制TabBar保持不透明（推荐） #

直接在TabView上添加toolbarBackground修饰符，指定背景色并设置始终可见，这是iOS 15+官方推荐的方式，比UIKit的外观设置更可靠：

修改HomeView中的TabView代码：

TabView (selection: $selection){
    FeedView()
        .tabItem {
            Image(systemName : "person.2.circle")
                .environment(\.symbolVariants, selection == 1 ? .fill : .none)
            Text("피드")
        }.tag(1)
    
    NMapView()
        .tabItem {
            Image(systemName : "map.circle")
                .environment(\.symbolVariants, selection == 2 ? .fill : .none)
            Text("지도")
        }.tag(2)
    
    SearchView()
        .tabItem {
            Image(systemName : "magnifyingglass.circle")
                .environment(\.symbolVariants, selection == 3 ? .fill : .none)
            Text("검색")
        }.tag(3)
    
    SettingView()
        .tabItem {
            Image(systemName : "ellipsis.circle")
                .environment(\.symbolVariants, selection == 4 ? .fill : .none)
            Text("설정")
        }.tag(4)
}
.accentColor(.white)
.toolbarBackground(Color("mainColor"), for: .tabBar) // 设置TabBar背景色
.toolbarBackground(.visible, for: .tabBar) // 强制背景始终可见

同时可以移除init中的UIKit外观设置，避免逻辑冲突。

方案2：调整List布局，避免触及TabBar #

让List的底部自动避开TabBar区域，通过给SearchView的List添加安全区域内边距：

修改SearchView的body代码：

var body: some View {
    VStack {
        SearchBar(text: $searchText)
            .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
        
        List {
            ForEach(array.filter{$0.hasPrefix(searchText)}, id:\.self) {
                searchText in Text(searchText)
            }
        }
        .listStyle(PlainListStyle())
        .onTapGesture {
            hideKeyboard()
        }
        .safeAreaInset(edge: .bottom) {
            Color.clear.frame(height: 0) // 触发List自动适配安全区域，避开TabBar
        }
    }
}

这样List会自动在安全区域内布局，不会触及TabBar，自然也就不会触发TabBar的透明效果。

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