我如何在 SwiftUI 的顶部而不是底部创建带有 Headers 的 TabView

Question

如何制作 headers 对齐到顶部而不是底部的 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（因为这与问题无关）。此外，我已经放置了所有代码，以便您可以创建新的空项目并复制粘贴它以尝试了解它是如何工作的。

让我们看一下：

Tabs 枚举是为简单性
selectedTab 变量正在跟踪哪个选项卡 当前 selected
我正在使用 if-else 构造来显示 selected 视图（从 SwiftUI 2.0 开始还有一个 switch 语句，但是因为你没有指定你使用的是什么版本，所以我使用的是 if-else)
tab视图本身无非就是Image & Text视图aligned来看像 TabView
使用三元运算符的foregroundColor修饰符正在模拟TabView的强调色
当点击时，每个文本 + 图像组合（替换普通 TabView 上的按钮）改变 state 到 select 它的视图是 visible （你也可以使用带动作的按钮而不是 .onTapGesture 我使用它是为了示例的简单性）

结果如下：

我如何在 SwiftUI 的顶部而不是底部创建带有 Headers 的 TabView

How can i create TabView with Headers on top not bottom in SwiftUI

tabview

swiftui