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

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

这不会编译，但它已在 WWDC 的 Swift Essentials 视频中使用（见第 54:30 分钟），我已经看到了一些解决方法，例如 VStack 解决方法（但即使有很多缺陷，左侧选项卡也离左右选项卡离右边太远，切换选项卡时，只有最初加载的第一个选项卡会加载，另一个选项卡保持空白，使用标签无济于事）。那么如何有两个选项卡来加载视图并具有图像和文本？

4

8 回答 8

12

使用 XCode beta 3，以下应该可以工作：

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)
        }
    }
}

不过，将选项卡标签包含在 a 中VStack似乎是可选的。因此，您可能决定放弃它，例如：

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)
        }
    }
}
于 2019-07-09T10:40:24.273 回答
9

TabbedView()已被弃用TabView()。

使用整数来选择视图对我来说很糟糕，从我使用tag()UIButton 和 UIView 的日子开始，最好枚举你在做什么，而不是分配一个范围很大的硬编码值。即Int.min()到Int.max()。这也使代码在将来更易于阅读和维护。

TabView(selection: )可用于选择索引，并声明为：

public struct TabView<SelectionValue, Content> : View where SelectionValue : Hashable, Content : View {
    public init(selection: Binding<SelectionValue>?, @ViewBuilder content: () -> Content)
…

这意味着您可以选择具有任何可散列内容的索引。

我们可以使用一个enum符合的Hashable来包含一个选项卡列表，这样以后可以使用一个 Observable 来帮助控制和加载视图的状态。或者将枚举作为应用程序状态的一部分。我相信您可以使用大量资源来找到满足您需求的合适解决方案。

 struct MainTabView: View {

 @State private var selection: Tabs = .profile

 private enum Tabs: Hashable {
     case content
     case profile
 }

 var body: some View {

    TabView(selection: $selection) {

        // Learn Content
        Text("The First Tab")
            .tabItem {
                Image(systemName: "book")
                Text("Learn")
        }.tag(Tabs.content)


        // The Users Profile View.
        ProfileView()
            .tabItem {
                Image(systemName: "person.circle")
                Text("Profile")
        }.tag(Tabs.profile)
    }

  }
}
于 2019-12-29T23:04:15.700 回答
9

对于那些仍在寻找如何做到这一点的人，这里是 Xcode 11 GM 的更新。

struct Tabs: View {

    @State private var selected = 0

    var body: some View {
        TabView(selection: $selected) {
            MyFirstView()
                .tabItem {
                    Image(systemName: (selected == 0 ? "star.fill" : "star"))
                    Text("One")
                }.tag(0)
            MySecondView()
                .tabItem {
                    Image(systemName: (selected == 1 ? "star.fill" : "star"))
                    Text("Two")
                }.tag(1)
            MyThirdView()
                .tabItem {
                    Image(systemName: (selected == 2 ? "star.fill" : "star"))
                    Text("Three")
                }.tag(2)
        }
        .edgesIgnoringSafeArea(.all) // Important if you want NavigationViews to go under the status bar...
    }
}
于 2019-09-23T20:50:09.650 回答
2

您的代码应该可以工作，但这是iOS 和 iPadOS 13 Beta 2 Release Notes中的一个已知问题：

tabItemLabel(_:) 修饰符不接受 @ViewBuilder 闭包。

在解决此问题之前，唯一的解决方法是使用您提到的 VStack。

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

更新：

Xcode 11 beta 3修复了这个问题：

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

例子：

.tabItem {
    Image(systemName: "circle")
    Text("Tab1")
}
于 2019-06-25T15:18:58.660 回答
1

从 Xcode 11 GM 开始，此代码有效：（来自https://developer.apple.com/documentation/swiftui/tabview）

TabView {
    Text("The First Tab")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)

于 2019-09-13T10:58:55.863 回答
1

TabbedView 已被弃用。

您现在可以改用TabView

struct AppTabbedView: View {
    @State private var selection = 3

    var body: some View {
        TabView (selection:$selection){
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")

            }
            .tag(1)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }.tag(2)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }.tag(3)
        }
        .font(.headline)
    }
}
于 2019-08-11T13:18:32.503 回答
1

TabbedView 已弃用并已重命名为 TabView 您可以像这样使用 TabView

TabView {
    (Text("Tab 1!").tabItem {
         Text("First")
    })
    (Text("Tab 2!").tabItem {
         Text("Second")
    })
}
于 2019-10-01T12:41:56.083 回答
0

'TabbedView' 的使用方式类似于以下：

    struct TabView : View {

        @State private var selection = 1

        var body: some View {
            TabbedView (selection: $selection) {
                InboxList()
                    .tabItemLabel(selection == 1 ? Image("second") : Image("first"))
                    .tag(1)

                PostsList()
                    .tabItemLabel(Image("first"))
                    .tag(2)

                Something()
                    .tabItemLabel(Image("first"))
                    .tag(3)
            }
        }
    }

我不确定为什么您的示例无法编译，但您错过了每个“选项卡”上的selection参数和属性。.tag

顺便说一句，在当前的 XCode 版本（beta 2）中，您不能同时将文本和图像显示为标签。

于 2019-06-25T15:09:44.470 回答