Как показать номер значка на tabItem TabView в SwiftUI?

Я работаю над дополнительным проектом с SwiftUI, и у меня есть сценарий, в котором мне нужно показать номер значка на одном из tabItems моего TabView.

У меня есть все, что связано с моими моделями, и привязка и так далее. Но я искал уже 2 дня, чтобы найти modifier, чтобы показать значок, но, к сожалению, все мои исследования зашли в тупик.

Я просмотрел документацию Apple SwiftUI API для TabView и искал здесь переполнение стека, а также конечно, тонны ссылок на результаты поиска Google.

Я наблюдаю за объектом среды, который содержит список элементов, и я знаю, как связать значок с количеством моих элементов, поэтому, когда у меня есть какое-либо обновление элемента (добавлено, удалено), значок будет обновлен. Но я не могу найти способ показать сам номер значка на tabItem.

Любая помощь очень ценится!


swift swiftui ios13 tabview
person JihadiOS    schedule 12.10.2019    source источник
comment
SwiftUI 3 (требуется iOS 15) теперь имеет модификатор .badge. См. пример в этом ответе.   -  person rob mayoff    schedule 08.06.2021

Ответы (2)


arrow_upward
10
arrow_downward

Нет модификаторов для установки номера значка на элементе вкладки, и если вы попытаетесь добавить для этого настраиваемый вид, он не будет виден; Это из документации 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

person Ahmed Elzohry    schedule 26.10.2019
comment
Это сработало как шарм, спасибо! Я скорректировал внешний вид значка в соответствии со своими потребностями. - person JihadiOS; 28.10.2019
comment
Пожалуйста. В этом сила представлений в SwiftUI; вы можете настроить их по своему усмотрению в соответствии со своими потребностями. - person Ahmed Elzohry; 30.10.2019
comment
Это отлично работало, пока я не добавил текстовое поле в свое представление. Когда клавиатура открылась и сместила нижнюю часть экрана вверх, она принесла с собой плавающий значок: / - person lmh; 11.09.2020
comment
Обратите внимание, что с iOS 14 вам нужно добавить .ignoresSafeArea (.keyboard) в закрывающий ZStack, чтобы избежать проблемы с плавающим значком клавиатуры. - person Curmudgeonlybumbly; 17.09.2020

arrow_upward
3
arrow_downward

iOS 15

Теперь мы можем использовать собственный _1 _ модификатор, доступный в строках списка и панелях вкладок:

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