SwiftUI嵌套TabView滑动时选中Tab异常问题求助

问题 #

嵌套TabBar点击功能正常，但滑动子TabBar时会直接跳转到父级的下两个Tab，无法正常切换子Tab。需求是：子TabView内滑动优先切换子Tab，滑到子Tab边界后继续滑动才切换父级Tab。

现有代码 #

父级ProfileView #

struct ProfileView: View {
    @State private var currentTab = 0

    var body: some View {
        VStack {
            Text("Parent Tab Bar")
            TabView(selection: $currentTab) {
                Text("Tab 1")
                    .tag(0)
                ListView(viewModel: ListsViewModel())
                    .tag(1)
                Text("Tab 3")
                    .tag(2)
            }
                .tabViewStyle(.page(indexDisplayMode: .never))
                .clipped()
                .contentShape(Rectangle())
        }
    }
}

子级相关代码（Lists枚举、ViewModel、ListView） #

enum Lists: String, CaseIterable {
    case current, nextUp, finished, shareable
}

class ListsViewModel: ObservableObject {
    @Published var selectedList: Lists = .current
}

struct ListView: View {
    @StateObject var viewModel = ListsViewModel()
    
    var body: some View {
        VStack {
            Text("Child Tab Bar")
                .font(.title)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 24) {
                    ForEach(Lists.allCases, id: \.self) { list in
                        Button(action: {
                            viewModel.selectedList = list
                        }) {
                            Text(list.rawValue.capitalized)
                                .font(.headline)
                                .foregroundColor(viewModel.selectedList == list ? .blue : .black)
                        }
                    }
                }
            }
            .padding(.horizontal)
            
            Divider()
                .padding(.top, 12)
                .padding(.horizontal)
            
            TabView(selection: $viewModel.selectedList) {
                ForEach(Lists.allCases, id: \.self) { list in
                    ScrollView {
                        VStack {
                            ForEach(0..<3) { index in
                                Text("\(list.rawValue) Tab Item \(index + 1)")
                                    .padding(.horizontal)
                            }
                        }
                    }
                    .tag(list)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .clipped()
            .contentShape(Rectangle())
        }
        .padding(.top, 12)
    }
}

解决方法 #

问题根源是父子TabView的水平滑动手势冲突，父级手势会优先拦截滑动操作。通过控制父级TabView的手势启用时机解决：

1. 修改子ViewModel，添加边界判断
   在ListsViewModel中新增计算属性，判断当前子Tab是否处于第一个或最后一个（滑动边界）：

class ListsViewModel: ObservableObject {
    @Published var selectedList: Lists = .current
    
    // 判断是否在子Tab的滑动边界
    var isAtEdge: Bool {
        let allCases = Lists.allCases
        guard let currentIndex = allCases.firstIndex(of: selectedList) else { return false }
        return currentIndex == 0 || currentIndex == allCases.count - 1
    }
}

2. 父级持有子ViewModel实例
   修改ProfileView，让它持有子级的ViewModel，确保父子共享同一个实例：

struct ProfileView: View {
    @State private var currentTab = 0
    // 持有子ViewModel实例
    @StateObject private var listViewModel = ListsViewModel()

    var body: some View {
        VStack {
            Text("Parent Tab Bar")
            TabView(selection: $currentTab) {
                Text("Tab 1")
                    .tag(0)
                // 传递共享的ViewModel给子View
                ListView(viewModel: listViewModel)
                    .tag(1)
                Text("Tab 3")
                    .tag(2)
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .clipped()
            .contentShape(Rectangle())
            // 核心逻辑：只有当子Tab在边界，或当前不在子Tab页面时，才允许父级响应手势
            .allowsHitTesting(currentTab != 1 || listViewModel.isAtEdge)
        }
    }
}

3. 修改子View的ViewModel初始化方式
   把ListView的@StateObject改为@ObservedObject，接收父级传递的ViewModel：

struct ListView: View {
    @ObservedObject var viewModel: ListsViewModel
    
    var body: some View {
        // 原有UI代码保持不变
        VStack {
            Text("Child Tab Bar")
                .font(.title)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 24) {
                    ForEach(Lists.allCases, id: \.self) { list in
                        Button(action: {
                            viewModel.selectedList = list
                        }) {
                            Text(list.rawValue.capitalized)
                                .font(.headline)
                                .foregroundColor(viewModel.selectedList == list ? .blue : .black)
                        }
                    }
                }
            }
            .padding(.horizontal)
            
            Divider()
                .padding(.top, 12)
                .padding(.horizontal)
            
            TabView(selection: $viewModel.selectedList) {
                ForEach(Lists.allCases, id: \.self) { list in
                    ScrollView {
                        VStack {
                            ForEach(0..<3) { index in
                                Text("\(list.rawValue) Tab Item \(index + 1)")
                                    .padding(.horizontal)
                            }
                        }
                    }
                    .tag(list)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .clipped()
            .contentShape(Rectangle())
        }
        .padding(.top, 12)
    }
}

效果说明 #

• 当父级Tab处于子Tab页面（Tab1），且子Tab不在边界时，父级TabView的手势被禁用，滑动只会切换子Tab；
• 当子Tab滑动到第一个或最后一个时，父级手势恢复，继续滑动即可切换到父级的下一个Tab；
• 点击操作不受任何影响，保持原有正常功能。

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