如何在SwiftUI的TabView的tabItem上显示徽章编号?

时间:2019-10-12 07:41:59

标签: swift swiftui ios13 tabview

我正在使用SwiftUI进行辅助项目,并且有一种情况,我需要在我的tabItems的{​​{1}}之一上显示徽章编号。

我已经设置了模型的所有内容,以及绑定等等。但是我一直在找两天了,找到一个TabView来显示徽章,但是很遗憾,我所有的研究都死了。

我已经浏览了TabView的Apple SwiftUI API文档,并在此处搜索了堆栈溢出情况,当然还搜索了许多Google搜索结果的链接。

我正在观察一个环境对象,该对象包含一个项目列表,并且我知道如何将徽章与我的项目计数绑定在一起,因此,当我进行任何项目更新(添加,删除)时,都会更新该徽章。但是我找不到在modifier上显示徽章编号本身的方法。

非常感谢您的帮助!

3 个答案:

答案 0 :(得分:3)

iOS 15

我们现在可以使用在列表行和标签栏中可用的原生 badge 修饰符:

TabView {
    Text("Tab One")
        .tabItem {
            Text("Home")
            Image(systemName: "house")
        }
        .badge(3)
}

答案 1 :(得分:2)

在标签项上没有用于设置徽章编号的修饰符,并且如果您尝试为此添加自定义视图,则该视图将不可见;这是来自TabView文档:

  

选项卡视图仅支持文本,图像或图像类型的选项卡项   其次是文字。传递任何其他类型的视图都会导致可见   但标签项为空。

因此,我尝试了一种解决方法,并且该方法可行。 将ZStack与GeometryReader结合使用并进行一些计算,以将自定义标志视图放置在正确的位置。

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

答案 2 :(得分:-2)

如果我正确理解了您的问题,那么您就必须仔细阅读tabBarController的tabBar项,然后选择所需的项:

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
            }
        }