[英]How to show a badge number on a tabItem of a TabView in SwiftUI?
我正在使用 SwiftUI 开展一个附带项目,并且我有一个场景,我需要在我的tabItems
的一个TabView
上显示一个徽章编号。
我用我的模型和绑定等设置了所有东西。 但是我一直在寻找2天来找到一个显示徽章的modifier
,但不幸的是我所有的研究都面临了死胡同。
我浏览了 Apple SwiftUI API 文档的TabView并在此处搜索堆栈溢出,当然还有大量的谷歌搜索结果链接。
我正在观察一个环境 object ,它包含一个项目列表,我知道如何将徽章与我的项目数绑定,所以当我有任何项目更新(添加、删除)时,徽章将被更新。 但是我找不到在tabItem
上显示徽章编号本身的方法。
非常感谢任何帮助!
没有用于在选项卡项目上设置徽章编号的修饰符,如果您尝试为此添加自定义视图,它将不可见; 这是来自 TabView 文档:
选项卡视图仅支持文本、图像或图像后跟文本类型的选项卡项。 传递任何其他类型的视图会导致可见但为空的选项卡项。
所以,我尝试了一种解决方法,它有效。 使用带有 GeometryReader 的 ZStack 和一些计算将自定义徽章视图放置在正确的位置。
struct ContentView: View {
@State private var badgeNumber: Int = 3
private var badgePosition: CGFloat = 3
private var tabsCount: CGFloat = 3
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .bottomLeading) {
// TabView
TabView {
Text("First View")
.tabItem {
Image(systemName: "1.circle")
Text("First")
}.tag(0)
Text("Second View")
.tabItem {
Image(systemName: "2.circle")
Text("Second")
}.tag(1)
Text("Third View")
.tabItem {
Image(systemName: "3.circle")
Text("Third")
}.tag(2)
}
// Badge View
ZStack {
Circle()
.foregroundColor(.red)
Text("\(self.badgeNumber)")
.foregroundColor(.white)
.font(Font.system(size: 12))
}
.frame(width: 20, height: 20)
.offset(x: ( ( 2 * self.badgePosition) - 1 ) * ( geometry.size.width / ( 2 * self.tabsCount ) ), y: -30)
.opacity(self.badgeNumber == 0 ? 0 : 1)
}
}
}
}
github 上提供的示例项目: https://github.com/aelzohry/TabBarSwiftUI
我们现在可以使用在列表行和标签栏中可用的原生badge
修饰符:
TabView {
Text("Tab One")
.tabItem {
Text("Home")
Image(systemName: "house")
}
.badge(3)
}
如果我正确理解您的问题,那么您必须通过 tabBarController 的 tabBar 项目 go 并选择您需要的项目,如下所示:
if let tabItems = tabBarController?.tabBar.items {
let tabItem = tabItems[1] // Or whatever tab you need
if value != 0 {
tabItem.badgeValue = String(value)
} else {
tabItem.badgeValue = nil
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.