tvOS开发：如何将TabView按钮移至右上角

tvOS原生TabView默认将tabItem展示在底部，无法直接把某个tab入口放到右上角。要实现这个需求，我们可以借助NavigationView的导航栏来添加右上角快捷按钮，同时绑定TabView的选中状态来切换页面。

实现代码 #

struct MainView: View {
    // 绑定TabView的选中标签索引
    @State private var selectedTab = 0
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                RecentView()
                    .tabItem { Text("One") }
                    .tag(0)
                
                RecentView()
                    .tabItem { Text("Two") }
                    .tag(1)
                
                RecentView()
                    .tabItem { Text("Three") }
                    .tag(2)
                
                // 新增的目标页面
                CustomPageView()
                    .tabItem { Text("Custom") }
                    .tag(3)
            }
            // 添加右上角导航栏按钮，点击切换到新增标签
            .navigationBarItems(trailing: Button(action: {
                selectedTab = 3
            }) {
                // 可替换为自定义图标或文字，适配tvOS风格
                Image(systemName: "plus.circle")
                    .font(.title)
            })
            // 隐藏导航栏标题（按需调整）
            .navigationBarTitle("")
            .navigationBarHidden(false) // tvOS必须保持导航栏可见，否则按钮会消失
        }
    }
}

// 示例新增页面
struct CustomPageView: View {
    var body: some View {
        Text("Custom Page")
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

关键说明 #

• 状态绑定：用@State变量selectedTab绑定TabView的选中状态，点击右上角按钮时直接切换到目标标签的索引。
• 导航栏适配：tvOS的导航栏会自动处理焦点逻辑，确保遥控器可以正常选中右上角按钮，这比直接用ZStack叠加按钮更稳妥。
• 自定义样式：按钮可以用图标或文字，建议使用符合tvOS设计规范的图标，提升交互体验。

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