iOS 14中如何为SwiftUI的leading navigationBarItems添加徽章？

嘿，我来帮你搞定这个需求！在SwiftUI里给导航栏的bell图标加徽章有两种常用方式，你可以根据自己的适配需求和样式偏好来选：

方法1：用系统自带的badge修饰符（iOS 15+） #

如果你的App只需要适配iOS15及以上版本，直接用系统提供的badge(_:)修饰符最省心，它会自动生成符合系统设计风格的徽章，代码改动极小：

var body: some View { 
    NavigationView { 
        ZStack { 
            VStack(spacing: 0) { 
                Text("Peanut") 
                    .padding(-10) 
                    .navigationBarTitle(Text("HomeTitle"), displayMode: .inline) 
                    .navigationBarItems(leading: HStack { 
                        NavigationLink(destination: Notifications()) { 
                            Image(systemName: "bell") 
                                .font(.system(size: 20)) 
                        }
                        .badge(3) // 替换成你的实际未读消息数量变量
                        .foregroundColor(.white) 
                    }, trailing: HStack { 
                        NavigationLink(destination: Settings()) { 
                            Image(systemName: "gearshape") 
                                .font(.system(size: 20)) 
                        }.foregroundColor(.white) 
                    }) 
            } 
        } 
    } 
}

方法2：自定义徽章样式（兼容低版本） #

如果需要适配iOS15以下系统，或者想要完全自定义徽章的外观（比如红色圆形、调整偏移位置），可以用ZStack把图标和徽章视图叠加在一起：

先定义一个变量存储未读数量（你可以把它换成和业务数据绑定的变量），再修改leading的NavigationLink部分：

@State private var unreadCount = 5 // 模拟未读消息数量

var body: some View { 
    NavigationView { 
        ZStack { 
            VStack(spacing: 0) { 
                Text("Peanut") 
                    .padding(-10) 
                    .navigationBarTitle(Text("HomeTitle"), displayMode: .inline) 
                    .navigationBarItems(leading: HStack { 
                        NavigationLink(destination: Notifications()) { 
                            ZStack(alignment: .topTrailing) {
                                Image(systemName: "bell") 
                                    .font(.system(size: 20))
                                
                                // 只有当有未读消息时才显示徽章
                                if unreadCount > 0 {
                                    Text(unreadCount > 9 ? "9+" : "\(unreadCount)")
                                        .font(.caption2)
                                        .foregroundColor(.white)
                                        .padding(.horizontal, 6)
                                        .padding(.vertical, 2)
                                        .background(Color.red)
                                        .clipShape(Circle())
                                        .offset(x: 6, y: -6) // 调整位置让徽章落在图标右上角
                                }
                            }
                        }
                        .foregroundColor(.white) 
                    }, trailing: HStack { 
                        NavigationLink(destination: Settings()) { 
                            Image(systemName: "gearshape") 
                                .font(.system(size: 20)) 
                        }.foregroundColor(.white) 
                    }) 
            } 
        } 
    } 
}

小细节调整提示 #

• 自定义徽章时，可以通过修改padding、background、offset的值，调整徽章的大小、颜色和位置；
• 如果未读数量超过9，建议显示9+来避免徽章变形，代码里已经加了这个判断；
• 记得把unreadCount和你的实际业务数据绑定，比如从ViewModel或网络请求获取真实的未读数量。

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