如何使用 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的官方发行说明中有一个解决方法：

解决办法：将传递给修饰符的视图包装在 VStacck 中：

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

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

Answer 3

您也可以

在iOS 14.0+中使用标签

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

Answer 4

现在 Xcode 11 GM 已经发布，以下是使用图像和标签实现 TabView 项目的方法。

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