SwiftUI：TabView标签页视图背景色修改及分隔线移除问题

解决思路分两步： #

1. 统一设置灰色背景

• 直接给TabBar和每个子视图添加灰色背景，并用ignoresSafeArea()让背景覆盖整个屏幕（包括安全区域）。
• 如果子视图用到List或ScrollView，系统默认会带白色背景，得额外把UITableView的背景设为透明，让它继承父视图的灰色。

2. 移除TabBar顶部的分隔线

这条线是UITabBar的默认阴影，直接通过UIKit的外观代理把阴影图设为空就能去掉，同时把背景图也设为空，避免残留痕迹。

完整示例代码 #

import SwiftUI

struct ContentView: View {
    init() {
        // 移除TabBar顶部阴影线
        UITabBar.appearance().shadowImage = UIImage()
        UITabBar.appearance().backgroundImage = UIImage()
        
        // 清除List默认白色背景
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        TabView {
            FirstView()
                .tabItem {
                    Image(systemName: "house")
                    Text("首页")
                }
            
            SecondView()
                .tabItem {
                    Image(systemName: "person")
                    Text("我的")
                }
        }
        .background(Color.gray.ignoresSafeArea()) // TabBar全局背景
    }
}

struct FirstView: View {
    var body: some View {
        List {
            ForEach(1...10, id: \.self) { index in
                Text("列表项 \(index)")
                    .listRowBackground(Color.gray) // 列表行背景匹配全局灰色
            }
        }
        .background(Color.gray.ignoresSafeArea())
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("我的页面")
                .font(.title)
            Spacer()
        }
        .background(Color.gray.ignoresSafeArea())
    }
}

关键细节说明 #

• init里的UIAppearance设置要放在视图初始化时，确保TabBar加载前就生效。
• 给List的每一行也设置灰色背景，避免列表项单独出现白色块。
• 每个子视图都添加背景色，保证切换标签页时不会出现局部白色。

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