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

时间:2019-06-14 20:44:37

标签: swift swiftui swift5 xcode11

我正在关注WWDC2019的会议:

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

我使用以下代码使用SwiftUI创建TabbedView:

// Section1 | ContentView(我的)-----------------------------

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

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

Tabbed View without image

但是,在WWDC2019会话中,使用了以下代码:

// Section2 | ContentView(Apple的)---------------------------

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 '_'

如以下屏幕截图所示enter image description here

enter image description here

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

如果WWDC2019演示文稿中的信息正确无误,那么WWDC2019幻灯片中演示的代码不会导致图像出现在选项卡式视图的选项卡中的原因是什么?

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

SwiftUI TabbedView only shows first tab's content

请注意,PlaceForm和FavoritesForm的内容如下所示

// Section3 | 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

3 个答案:

答案 0 :(得分:3)

此问题已在Xcode 11 beta 3中修复。来自iOS & iPadOS 13 Beta 3 Release Notes

  

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

示例:

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

答案 1 :(得分:0)

在Beta 2中,我通过使用VStack将2个控件包装在tabItemLabel中而获得了成功:

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

答案 2 :(得分:0)

经过一番摸索后,选项卡式视图似乎还不接受系统图像。此代码为我编译。我正在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
        }
    }
}

我尝试将VStack用于tabItemLabels(图像和文本),但调试器说tabItemLabels不接受VStack,仅接受图像和文本。我还没有找到如何使文本和图像显示出来的方法,它似乎只接受其中一个。我试过使用括号,方括号,花括号,VStack,它们都不起作用。看起来现在是一个或另一个。