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
}

注意：为了使标签完全对齐，我并没有付出太多努力，为了简化起见，使用了Spacer（因为这与问题无关）。另外，我已经放置了所有代码，以便您可以创建新的空项目并将其复制粘贴，以尝试了解其工作原理。

让我们经历一下：

为简单
selectedTab 变量可跟踪当前选中的选项卡
我正在使用if-else构造来显示所选视图（从SwiftUI 2.0开始，还有一个切换语句，但是由于您未指定您正在使用的版本，我正在使用if-else）
标签视图本身就是图片和文本视图，它们对齐以看起来像TabView
使用三元运算符的 foregroundColor修饰符正在模拟TabView的强调色
点击时，每个文本+图片组合（在常规TabView中替换按钮）更改状态选择其视图为可见（您也可以将按钮与操作配合使用，而不是.onTapGesture，为了示例简单起见，我使用了此按钮）

结果如下：

如何在SwiftUI中创建标题位于顶部而不位于底部的TabView

1 个答案: