SwiftUI TabView默认选中禁用实现方案咨询

可以用原生TabView实现，完全不需要自定义。核心是利用可选类型的selection来避免系统自动选中第一个标签，再配合弹窗的关闭回调重置选中状态。

具体实现方案 #

1. 用可选类型控制选中状态：把selection声明为Int?，初始值设为nil——原生TabView找不到匹配的tag时，就不会自动选中任何标签。
2. 点击Tab触发弹窗：监听selection的变化，一旦用户点击某个Tab，就弹出自定义底部弹窗，同时可以立即重置selection避免Tab栏短暂显示选中状态。
3. 弹窗关闭后重置状态：在弹窗的关闭回调里，把selection设回nil，让Tab栏回到无选中的初始状态。
4. 隐藏Tab内容区域：因为我们不需要切换Tab对应的视图，直接用EmptyView占位就行，省得多余视图干扰。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            SimpleDataView()
            BottomTabView()
        }
    }
}

struct SimpleDataView: View {    
    var body: some View {
        Text("Map will be displayed over here")
            .background(Color.gray)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .ignoresSafeArea()
    }
}

struct BottomTabView: View {
    // 可选类型，初始无选中状态
    @State private var selection: Int? = nil
    // 控制弹窗显示/隐藏
    @State private var isModalSheetPresented = false
    // 记录当前点击的Tab标签，用于区分弹窗内容（可选）
    @State private var currentTabTag: Int? = nil
    
    var body: some View {
        TabView(selection: $selection) {
            // 每个Tab用EmptyView占位，不需要显示内容
            EmptyView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0 as Int?)
            
            EmptyView()
                .tabItem {
                    Label("Search", systemImage: "magnifyingglass")
                }
                .tag(1 as Int?)
        }
        .onChange(of: selection) { newSelection in
            guard let tag = newSelection else { return }
            currentTabTag = tag
            isModalSheetPresented = true
            // 立即重置选中状态，避免Tab栏显示选中样式
            selection = nil
        }
        .sheet(isPresented: $isModalSheetPresented, onDismiss: {
            // 弹窗关闭后确保选中状态完全重置
            selection = nil
            currentTabTag = nil
        }) {
            // 自定义带滑块的底部弹窗
            CustomBottomModalSheet(tag: currentTabTag)
                .presentationDetents([.medium, .large]) // 支持拖拽调节尺寸
                .presentationDragIndicator(.visible) // 显示拖拽手柄
        }
        .onAppear {
            UITabBar.appearance().backgroundColor = .lightGray
        }
    }
}

// 自定义底部弹窗示例（可替换成你自己的弹窗视图）
struct CustomBottomModalSheet: View {
    let tag: Int?
    
    var body: some View {
        VStack {
            Text(tag == 0 ? "Home 专属弹窗" : "Search 专属弹窗")
                .font(.title)
            Spacer()
        }
        .padding()
        .background(Color.white)
    }
}

#Preview {
    ContentView()
}

关键细节说明 #

• 可选类型的Tag匹配：每个Tab的tag必须声明为Int?（比如tag(0 as Int?)），才能和selection: Int?的类型匹配，否则系统还是会默认选中第一个Tab。
• 原生弹窗拖拽支持：用presentationDetents设置弹窗的可选高度，配合presentationDragIndicator显示拖拽手柄，就能实现带滑块调节尺寸的底部弹窗，不用自己写拖拽逻辑。
• 即时重置选中状态：在onChange里立即把selection设回nil，可以避免Tab栏在点击后短暂显示选中的高亮样式，体验更流畅。

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