如何将SwiftUI底部标签栏（Bottom Tab）移至顶部？

问题翻译及整理 #

以下SwiftUI代码会生成底部标签栏：

public struct TeamBContentView : View {
    public init() {}
    public var body: some View {
        VStack {
            TabView {
                Text("This is home screen")
                    .tabItem {
                        Text("Home")
                        Image(systemName: "house.fill")
                    }
                Text("This is about us screen")
                    .tabItem {
                        Text("About Us")
                        Image(systemName: "person.fill")
                    }
                Text("This is contact us screen")
                    .tabItem {
                        Text("Contact Us")
                        Image(systemName: "phone.fill")
                    }
            }
        }
    }
}

效果如下：

请问是否有简便方法将该标签栏移至屏幕顶部？

解决方案 #

当然有简便方法，分两种场景处理：

1. iOS 16 及以上版本（推荐）

直接给TabView添加.tabBarPlacement(.top)修饰符，就能一键把标签栏移到顶部，代码改动极小：

public struct TeamBContentView : View {
    public init() {}
    public var body: some View {
        VStack {
            TabView {
                Text("This is home screen")
                    .tabItem {
                        Text("Home")
                        Image(systemName: "house.fill")
                    }
                Text("This is about us screen")
                    .tabItem {
                        Text("About Us")
                        Image(systemName: "person.fill")
                    }
                Text("This is contact us screen")
                    .tabItem {
                        Text("Contact Us")
                        Image(systemName: "phone.fill")
                    }
            }
            .tabBarPlacement(.top) // 新增这一行即可
        }
    }
}

2. iOS 15 及更早版本

如果需要兼容老系统，可以通过自定义顶部工具栏实现标签切换，同时隐藏默认底部标签栏：

public struct TeamBContentView : View {
    @State private var selectedTab = 0
    public init() {}
    public var body: some View {
        VStack {
            // 顶部自定义标签栏
            HStack {
                Button(action: { selectedTab = 0 }) {
                    VStack {
                        Image(systemName: selectedTab == 0 ? "house.fill" : "house")
                        Text("Home")
                    }
                    .foregroundColor(selectedTab == 0 ? .blue : .gray)
                }
                Spacer()
                Button(action: { selectedTab = 1 }) {
                    VStack {
                        Image(systemName: selectedTab == 1 ? "person.fill" : "person")
                        Text("About Us")
                    }
                    .foregroundColor(selectedTab == 1 ? .blue : .gray)
                }
                Spacer()
                Button(action: { selectedTab = 2 }) {
                    VStack {
                        Image(systemName: selectedTab == 2 ? "phone.fill" : "phone")
                        Text("Contact Us")
                    }
                    .foregroundColor(selectedTab == 2 ? .blue : .gray)
                }
            }
            .padding()
            
            // 页面内容切换
            switch selectedTab {
            case 0: Text("This is home screen")
            case 1: Text("This is about us screen")
            case 2: Text("This is contact us screen")
            default: Text("This is home screen")
            }
            Spacer()
        }
    }
}

如果项目已适配iOS16+，第一种方法是最简便的；若需兼容老版本，第二种自定义方式也能实现等效效果。

内容的提问来源于stack exchange，提问作者Elye