如何使用 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 有一个解决方法：

Workaround: Wrap the views you pass to the modifier in a VStack:

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

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

Answer 3

既然 Xcode 11 GM 已经发布，下面是您如何实现带有图像和标签的 TabView 项目

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

Answer 4

您也可以在 iOS 14.0+

中使用 Label

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