如何使用SwiftUI向标签栏项添加图像和标签

Question

使用此代码，我可以设置标签或图像，但不清楚如何设置两者。

    var body: some View {
        Text("Library")
            .font(.title)
//            .tabItemLabel(Image("first"))
            .tabItemLabel(Text("Library"))
            .tag(0)
    }

Answer 1

在SwiftUI Essentials WWDC演讲中，他们使用此示例代码在标签栏项中同时包含图像和标签：

TabbedView {

  OrderForm()
  .tabItemLabel {
    Image(systemName: "square.and.pencil")
    Text("New Order")
  }
  OrderHistory()
  .tabItemLabel {
    Image(systemName: "clock.fill")
    Text("History")
  }
}

但是目前使用这种方法在Xcode 11 beta中添加`tabItemLabel`会引发编译器错误，因此无法使用。因此，这可能是一个错误，可能会在以后的版本中修复。

---

更新：

此问题已通过 Xcode 11 beta 3 修复。 tabItemLabel重命名为tabItem，可以像下面这样使用：

.tabItem {
    Image(systemName: "circle")
    Text("Tab1")
}

Answer 2

iOS 13 Beta 2的官方Release Notes上有一种解决方法。

  

解决方法：在VStack中包装您传递给修改器的视图：

MyView()
    .tabItemLabel(VStack {
        Image("resourceName")
        Text("Item")
    })

注意：此替代方法不适用于Image(systemImage: "")

Answer 3

您也可以在 iOS 14.0+ 中使用 Label

.tabItem {
    Label("First Tab", systemImage: "phone.fill")
}

Answer 4

现在Xcode 11 GM已经发布，这是您可以实现带有图像和标签的TabView项目的方法

.tabItem {
   Image(systemName: "phone.fill")
   Text("First Tab")
}