我如何在 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建设，显示了选择视图（如SwiftUI 2.0的也有一个开关语句，但因为你没有什么版本您使用我使用指定的if-else）
4. 选项卡视图本身只不过是对齐的图像和文本视图，看起来像 TabView
5. 使用三元运算符的foregroundColor 修饰符模拟 TabView 的强调色
6. 当抽头，每个文本+图像组合（其代替在正常TabView的按钮）改变的状态，以选择它的视图可见（您也可以使用按钮与动作的代替.onTapGesture我用这对于示例的简单性）

结果如下：