How do I use TabbedView in SwiftUI?

Question

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView {
                PasswordGenerator()
                    .tabItemLabel {
                        Image("KeyGlyph")
                        Text("Generator")
                }

                PasswordGeneratorSettings()
                    .tabItemLabel {
                            Image("SettingsGlyph")
                            Text("Settings")
                }
            }
        }
    }
}

This won't compile but it was used in the Swift Essentials video at WWDC (See minute 54:30) and I've seen some workarounds like the VStack workaround (but even that has many flaws, the left tab is too far to the left and the right tab is too far to the right and when switching tabs only the first one that initially loaded loads and the other tab stays blank and using tags doesn't help). So how do I have two tabs that load the views and have an Image and Text?

Answer 1

With XCode beta 3 the following should work:

import SwiftUI

struct Home : View {
    @State private var currentTab = 1

    var body: some View {
        TabbedView(selection: $currentTab) {
            FirstView()
                .tabItem {
                    VStack {
                        Image(systemName: "1.circle")
                        Text("First Tab")
                    }
                }.tag(1)
            SecondView()
                .tabItem {
                    VStack {
                        Image(systemName: "2.circle")
                        Text("Second Tab")
                    }
                }.tag(2)
        }
    }
}

Enclosing the tab label in a VStack seems to be optional, though. So, you might decide to drop this, like:

import SwiftUI

struct Home : View {
    @State private var currentTab = 1

    var body: some View {
        TabbedView(selection: $currentTab) {
            FirstView()
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First Tab")
                }.tag(1)
            SecondView()
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second Tab")
                }.tag(2)
        }
    }
}