如何在 SwiftUI 中使用顶部而不是底部的标题创建 TabView

Question

如何制作一个 SwiftUI TabView，其标题对齐到顶部而不是底部。

谢谢

Answer 1

SwiftUI不直接支持，但您可以制作自己的自定义视图，这里有一个简单的示例说明如何做到这一点：

struct ContentView: View {
    
    @State var selectedTab = Tabs.FirstTab
    
    var body: some View {
        VStack {            
            HStack {
                Spacer()
                VStack {
                    Image(systemName: "airplane")
                    .foregroundColor(selectedTab == .FirstTab ? Color.red : Color.black)
                    Text("First tab")
                }
                .onTapGesture {
                    self.selectedTab = .FirstTab
                }
                Spacer()
                VStack {
                    Image(systemName: "person.fill")
                        .foregroundColor(selectedTab == .SecondTab ? Color.red : Color.black)
                    Text("Second tab")
                }
                .onTapGesture {
                    self.selectedTab = .SecondTab
                }
                Spacer()
                VStack {
                    Image(systemName: "cart.fill")
                        .foregroundColor(selectedTab == .ThirdTab ? Color.red : Color.black)
                    Text("Third tab")
                }
                .onTapGesture {
                    self.selectedTab = .ThirdTab
                }
                Spacer()
            }
            .padding(.bottom)
            .background(Color.green.edgesIgnoringSafeArea(.all))
            
            Spacer()
            
            if selectedTab == .FirstTab {
                FirstTabView()
            } else if selectedTab == .SecondTab {
                SecondTabView()
            } else {
                ThirdTabView()
            }
        }
    }
}

struct FirstTabView : View {
    
    var body : some View {
        VStack {
            Text("FIRST TAB VIEW")
        }
    }
}

struct SecondTabView : View {
    
    var body : some View {
        Text("SECOND TAB VIEW")
    }
}

struct ThirdTabView : View {
    
    var body : some View {
        Text("THIRD TAB VIEW")
    }
}

enum Tabs {
    case FirstTab
    case SecondTab
    case ThirdTab
}

注意：为了简单起见，我没有花太多精力来完美对齐标签并使用 Spacers（因为这与问题无关）。我还放了所有代码，以便您可以创建新的空项目并复制粘贴它以尝试了解它是如何工作的。

让我们来看看吧：

1. Tabs 枚举是为了简单而创建的
2. selectedTab 变量跟踪当前选择了哪个标签
3. 我正在使用 if-else 构造来显示 selected 视图（从 SwiftUI 2.0 开始，还有一个 switch 语句，但由于您没有指定什么你使用的版本我使用的是 if-else)
4. 标签视图本身只不过是 Image 和 Text 视图 对齐 看起来像 TabView
5. 使用三元运算符的foregroundColor修饰符正在模拟TabView的强调色
6. 点击时，每个文本 + 图像组合（替换普通 TabView 上的按钮）更改状态 将其视图选择为可见（您也可以使用带有动作的按钮而不是 .onTapGesture 我使用它是为了简化示例）

结果如下：