Как показать номер значка на tabItem элемента TabView в SwiftUI? - PullRequest
Новая
       17

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

2 голосов
/ 12 октября 2019

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

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

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

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

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

Ответы [ 2 ]

1 голос
/ 26 октября 2019

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

0 голосов
/ 12 октября 2019

если я правильно понял ваш вопрос, то вам нужно пройти через элементы tabBar вашего tabBarController и выбрать нужный вам элемент, например: 

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