在 Xcode11Beta (11M336w) 中使用 SwiftUI 的 TabbedView答案

【问题标题】：TabbedView using SwiftUI in Xcode11Beta (11M336w)在 Xcode11Beta (11M336w) 中使用 SwiftUI 的 TabbedView
【发布时间】：2019-10-29 11:44:29
【问题描述】：

我在这里关注 WWDC2019 的会议：

https://developer.apple.com/videos/play/wwdc2019/216/

我有以下代码用于使用 SwiftUI 创建 TabbedView：

//第 1 节 |内容视图（我的）---------------

import SwiftUI

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView(selection: .constant(1)) {
                PlaceForm().tabItemLabel(Text("Tab1")).tag(1)
                FavoritesForm().tabItemLabel(Text("Tab2")).tag(2)
            }
        }

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

//--------------- 以上产生了以下选项卡式视图：

但是，在 WWDC2019 会议中，使用了以下代码：

//第 2 节 | ContentView（苹果的）---------------

import SwiftUI

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView(selection: .constant(1)) {
                PlaceForm().tabItemLabel {
                    Image(systemName: "square.and.pencil")
                    Text("Tab1")
                }
                FavoritesForm().tabItemLabel {
                    Image(systemName: "clock.fill")
                    Text("Tab2")
                }
            }
        }

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

//---------------------------

但是，在 Xcode11Beta 上，这会导致 Xcode11Beta 引发以下编译器错误

Cannot convert value of type 'TabbedView<Int, 

TupleView<(_ModifiedContent<PlaceForm, _TraitWritingModifier<AnyView?>>, 

_ModifiedContent<FavoritesForm, _TraitWritingModifier<AnyView?>>)>>' to 

closure result type '_'

如下图所示

和

//---------------------------

如果 WWDC2019 演示文稿中的信息正确，为什么 WWDC2019 幻灯片中演示的代码不会导致图像显示在选项卡式视图的选项卡中？

此外，使用 section1 中的代码，将选项卡切换到 tab2 会显示一个空白视图，如以下问题所述：

SwiftUI TabbedView only shows first tab's content

请注意PlaceForm和FavoritesForm的内容转载如下

//第 3 节 | PlaceForm---------------

import SwiftUI

struct PlaceForm : View {
    var body: some View {
        List {
            VStack {
                MapView()
                    .edgesIgnoringSafeArea(.top)
                    .frame(height: 300)

                CircleImage()
                    .offset(y: -130)
                    .padding(.bottom, -130)
                VStack {
                    VStack {
                        Text("Turtle Rock")
                            .font(.title)
                            .color(.black)
                    }
                    HStack {
                        Text("Joshua Tree National Park")
                            .font(.subheadline)
                        Spacer()
                        Text("California")
                            .font(.subheadline)
                    }
                    }
                    .padding()
            }
        }.listStyle(.grouped)

    }
}

#if DEBUG
struct PlaceForm_Previews : PreviewProvider {
    static var previews: some View {
        PlaceForm()
    }
}
#endif

//第 4 节 |收藏表格---------------

import SwiftUI

struct FavoritesForm : View {
    var body: some View {
        List {
            VStack {
                MapView()
                    .edgesIgnoringSafeArea(.top)
                    .frame(height: 300)

                CircleImage()
                    .offset(y: -130)
                    .padding(.bottom, -130)
                VStack {
                    VStack {
                        Text("Ninja Rock")
                            .font(.title)
                            .color(.black)
                    }
                    HStack {
                        Text("Joshua Tree National Park")
                            .font(.subheadline)
                        Spacer()
                        Text("California")
                            .font(.subheadline)
                    }
                    }
                    .padding()
            }
            }.listStyle(.grouped)

    }
}

#if DEBUG
struct FavoritesForm_Previews : PreviewProvider {
    static var previews: some View {
        FavoritesForm()
    }
}
#endif

【问题讨论】：

在 WWDC 上完成的许多演示将使用早期或更新版本的 Xcode 和 Swift。所以他们展示了很多不起作用的东西。
我正在使用他们声称在演示中使用的 Xcode 和 Swift5 版本，即 Xcode11 和 Swift5。我觉得我被苹果骗了。
这有点过于戏剧化了。没有人在骗你。您正在使用测试版软件。它仍在开发中。它会随着你的使用而改变。当您决定开始使用他们的测试版软件时，这就是您所接受的。
WWDC 演讲者在舞台上使用测试工具的第二个种子并不少见。他们今年没有提到它，但从他们展示的东西中可以清楚地看出，直到 beta 2 才可用（特别是 SwiftUI 中的 Form 元素有大部分时间专门用于它，而 beta 1 中没有它）。这是正常的。

标签： swift swiftui swift5 xcode11

【解决方案1】：

Xcode 11 beta 3 修复了这个问题。来自iOS & iPadOS 13 Beta 3 Release Notes：

tabItemLabel(:) 修饰符 - 现在命名为 tabItem(:) - 现在接受 @ViewBuilder 闭包。 (51502668)

例子：

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

【讨论】：

【解决方案2】：

我在 Beta 2 中通过使用 VStack 将 2 个控件包装在 tabItemLabel 中取得了成功：

.tabItemLabel(VStack {
                    Image(systemName: "list.bullet")
                    Text("Foo").font(.title)
            })

【讨论】：

在 Mojave 上似乎不适合我，你有 Catalina 吗？

【解决方案3】：

经过一番尝试，选项卡式视图似乎还不接受系统图像。这段代码为我编译。我在 Catalina 10.15 Beta (19A487m) 上运行 Xcode 11.0 beta (11M336w)。

struct TabView : View { 
    var body: some View {
        TabbedView {
            HomeFeedUIV().tabItemLabel(Image(systemName: "house")) // doesn't work

            DatabaseHomeUIV().tabItemLabel(Image("database.unselected")) // works

            NewPostUIV().tabItemLabel(Image(systemName: "square.and.pencil")) // doesn't work
        }
    }
}

我尝试为 tabItemLabels（图像和文本）使用 VStack，但调试器说 tabItemLabels 不接受 VStack，只接受图像和文本。我还没有弄清楚如何使文本和图像出现，它似乎只接受一个或另一个。我尝试过使用括号、方括号、花括号、VStacks，但它们都不起作用。目前看来是其中之一。

【讨论】：