SwiftUI TabView：如何为TabItem添加顶部内边距？

想要给TabView的TabItem元素顶部增加空间，因为Label图标顶部距离TabView边缘太近。尝试直接给TabView添加.padding(.top, 20)时出现异常，会给屏幕顶部添加内边距，而非TabItem区域。

完整ContentView.swift代码：

import SwiftUI
import WidgetKit
import UserNotifications
import UIKit

struct ContentView: View {
    @StateObject var sharedVars = SharedVarsBetweenTabs()
    
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house.fill")
                }
            AppearanceView()
                .tabItem {
                    Label("Appearance", systemImage: "paintbrush.fill")
                }
            QuotesView()
                .tabItem {
                    Label("Quotes", systemImage: "quote.bubble.fill")
                }
        }
        // 曾在此处添加.padding(.top, 20)，效果不符合预期
        .environmentObject(sharedVars)
        .accentColor(.blue)
        .onAppear {
            UITabBar.appearance().backgroundColor = UIColor.black
            UITabBar.appearance().unselectedItemTintColor = UIColor.white
        }
    }
}

class SharedVarsBetweenTabs: ObservableObject {
    @Published var colorPaletteIndex = 0
}

所有子视图的VStack均包含以下属性：

.frame(maxWidth: .infinity)
        .padding()
        .background(ColorPaletteView(colors: [colorPalettes[safe: sharedVars.colorPaletteIndex]?[0] ?? Color.clear])) // 对应截图中的蓝色区域

当前效果：

方法1：给TabItem内部的Label添加顶部内边距 #

直接在每个TabItem的Label上设置顶部padding，仅作用于TabItem内容，不会影响整体布局：

.tabItem {
    Label("Home", systemImage: "house.fill")
        .padding(.top, 8) // 根据需求调整数值
}

方法2：自定义TabItem布局容器 #

如果需要更精准控制图标和文字的位置，用VStack包裹元素，单独调整内边距：

.tabItem {
    VStack(spacing: 4) {
        Image(systemName: "house.fill")
            .padding(.top, 8)
        Text("Home")
    }
}

这种方式可以分离图标和文字的间距与内边距，适配更复杂的布局需求。

方法3：全局调整UITabBar内容内边距 #

若希望所有TabItem统一设置，可在onAppear中修改UITabBar的contentInset：

.onAppear {
    UITabBar.appearance().backgroundColor = UIColor.black
    UITabBar.appearance().unselectedItemTintColor = UIColor.white
    // 设置TabBar内容的顶部内边距
    UITabBar.appearance().contentInset = UIEdgeInsets(top: 8, left: 0, bottom: 0, right: 0)
}

注意：此方法会影响全局所有TabBar，若需单独设置特定TabView，需进行针对性处理。

关键注意点 #

不要直接给TabView添加.padding(.top)，这会为整个TabView容器添加顶部内边距，导致页面内容整体下移，与需求不符。正确的做法是将padding应用在TabItem内部的元素上，或通过UITabBar的原生API调整内容区域。

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