SwiftUI中.tabItem内自定义图标显示异常问题求助

核心问题原因 #

SwiftUI的TabItem会应用系统默认布局与样式规则，直接给Image或Text添加的尺寸、字体等修饰器会被系统样式覆盖，导致自定义效果不生效。

解决方案 #

1. 调整自定义图标尺寸

使用scaledToFit()配合固定尺寸框架，确保图标适配TabBar默认空间：

.tabItem {
    Image("home-icon")
        .resizable()
        .scaledToFit() // 保持图标比例，避免拉伸变形
        .frame(width: 24, height: 24) // 匹配系统默认图标尺寸（24x24）
    Text("Home")
}

若需图标支持 tint 颜色变化，可追加.renderingMode(.template)修饰器。

2. 修复文本样式失效问题

TabItem的文本样式由UIKit的UITabBarItem全局控制，需通过外观代理统一设置：
在App入口（如App结构体初始化方法）或根视图的onAppear中添加以下代码：

.init() {
    // 设置未选中状态的文本属性
    UITabBarItem.appearance().setTitleTextAttributes([
        NSAttributedString.Key.font: UIFont.systemFont(ofSize: 15, weight: .medium, design: .rounded),
        NSAttributedString.Key.foregroundColor: UIColor(Color("blue"))
    ], for: .normal)
    
    // 设置选中状态的文本属性
    UITabBarItem.appearance().setTitleTextAttributes([
        NSAttributedString.Key.font: UIFont.systemFont(ofSize: 15, weight: .medium, design: .rounded),
        NSAttributedString.Key.foregroundColor: UIColor(.white) // 自定义选中时的文本颜色
    ], for: .selected)
    
    // 统一设置图标 tint 颜色
    UITabBar.appearance().tintColor = UIColor(Color("blue"))
    UITabBar.appearance().unselectedItemTintColor = UIColor(.gray)
}

3. 替代方案：自定义Label样式（可选）

若偏好使用Label，可通过自定义LabelStyle控制图标尺寸：

struct TabLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon
                .resizable()
                .scaledToFit()
                .frame(width: 24, height: 24)
            configuration.title
        }
    }
}

// 使用方式
.tabItem {
    Label("Home", image: "home-icon")
        .labelStyle(TabLabelStyle())
}

此方式仍需配合全局文本样式设置，才能让圆角字体生效。

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