SwiftUI：修改选中TabItem背景色及预览与真机差异问题

问题描述 #

开发SwiftUI应用时，Xcode预览中TabItem选中状态显示正常，但部署至iPhone 14 Pro（iOS 17）真机后，选中的TabItem会出现整体背景高亮，需要解决该差异问题，移除真机中的背景高亮，使效果与预览一致。

效果对比 #

• 预览效果（正确视图）：
  

• 真机部署效果（背景高亮）：
  

相关代码（使用Assets中的AccentColor设置颜色） #

import SwiftUI

struct PEView: View {
    var body: some View {
        TabView {
           DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
           SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
           SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
    }
}

#Preview {
    PEView()
}

差异原因 #

iOS 17对TabBar的默认样式进行了更新，真机系统默认启用了选中TabItem的背景高亮效果；而Xcode预览环境可能未完全同步这一最新的系统默认表现，导致两者显示不一致。

解决方法 #

方法一：通过UITabBarAppearance全局修改样式 #

在PEView结构体中添加初始化方法，自定义TabBar的选中项背景色：

struct PEView: View {
    init() {
        let tabBarAppearance = UITabBarAppearance()
        // 将选中项的背景色设为透明
        tabBarAppearance.stackedLayoutAppearance.selected.backgroundColor = .clear
        UITabBar.appearance().standardAppearance = tabBarAppearance
        // 适配页面滚动时的TabBar样式
        UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
    
    var body: some View {
        TabView {
           DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
           SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
           SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
    }
}

方法二：使用SwiftUI原生修饰符设置 #

直接给TabView添加toolbarBackground修饰符，指定TabBar背景为透明：

struct PEView: View {
    var body: some View {
        TabView {
           DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
           SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
           SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
        .toolbarBackground(Color.clear, for: .tabBar)
        .toolbarBackground(.visible, for: .tabBar)
    }
}

该方法适配iOS 16及以上版本，更符合SwiftUI声明式语法风格。

设置完成后，真机上选中的TabItem将不再显示背景高亮，效果与Xcode预览一致。

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