TabItem 上的自定义徽章颜色

Question

我需要更改 SwiftUI 中 tabItem 徽章的颜色。 我创建了这个 Pod https://github.com/jogendra/BadgeHub

可以与 SwiftUI 一起使用吗？

我有选项卡项目：

TabView(selection: $selection) {
    FeaturedView(users: filteredUsers, usersCount: filteredUsersCount)
        .tabItem {
            Image(selection == 0 ? "ic_searchFill" : "ic_search").renderingMode(.template)
        }
        .tag(0)
    LikesView(userViews: self.userViews, userLikes: self.userLikes)
        .tabItem {
            Image(selection == 1 ? "ic_heartFill" : "ic_heart").renderingMode(.template)
        }
        .badge(userLikesCount)
        .tag(1)
    ConversationsView(conversations: conversations)
        .tabItem {
            Image("ic_chat").renderingMode(.template)
        }
        .badge(conversationsCount)
        .tag(2)
    SettingsView(user: user)
        .tabItem {
            Image(selection == 3 ?  "ic_profileFill" : "ic_profile").renderingMode(.template)
        }
        .tag(3)
}

Answer 1

实际上我们也可以通过外观配置 SwiftUI 徽章颜色。

使用 Xcode 13.4 / iOS 15.5 进行测试

init() {
    UITabBarItem.appearance().badgeColor = .purple   // << here !!
}

var body: some View {
    TabView {
        Color.green.overlay(Text("One"))
            .tabItem { Image(systemName: "car") }
            .badge(4)
// ...

Answer 2

这对我来说适用于带有 SwiftUI 的标准选项卡栏（TabView）。这适用于 iOS 15 和 16。

let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.stackedLayoutAppearance.normal.badgeBackgroundColor = UIColor(Color.purple)
UITabBar.appearance().standardAppearance = tabBarAppearance

Answer 3

您可以使用 UIKit 更改 SwiftUI 中的徽章颜色。在您的 App 结构或 View 结构中添加这些行：

init() {
    let tabBarAppearance = UITabBarAppearance()
    let itemAppearance = UITabBarItemAppearance()
    itemAppearance.normal.badgeBackgroundColor = .accent
    tabBarAppearance.stackedLayoutAppearance = itemAppearance
    UITabBar.appearance().standardAppearance = tabBarAppearance
    UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}