SwiftUI TabView切换标签时onChange修饰符未触发问题求助

我在使用SwiftUI的TabView时遇到两个问题：

• 基于字典键动态生成标签页，切换标签时onChange修饰符完全不触发，无法更新共享状态sharedState.functionCategory。
• 尝试跳过onChange直接给子视图传参，结果切换标签时始终显示第一个子视图的内容。

问题代码1：onChange不触发 #

struct FunctionCatalogContainer: View {
    @EnvironmentObject var sharedState: SharedState
    @State private var selectedTabIndex = 0 // 追踪选中的标签索引

    var body: some View {
        ZStack {
            TopColorGradient(color: .cyan)
            TabView(selection: $selectedTabIndex) {
                ForEach(Array(functionPropsTypes.keys.sorted()), id: \.self) { key in
                    Text(key)
                        .tabItem {
                            Text(key)
                        }
                }
            }
            .onChange(of: selectedTabIndex) { newIndex, _ in
                let selectedKey = Array(functionPropsTypes.keys.sorted())[newIndex]
                sharedState.functionCategory = selectedKey
            }
        }
    }
}

切换标签页时，onChange闭包完全没执行，sharedState.functionCategory始终保持初始值。

问题代码2：子视图显示异常 #

struct FunctionCatalog: View {
    @State var functionCategory: String
    @EnvironmentObject var sharedState: SharedState
    var body: some View {
        List {
            if let parameterSignatures = functionPropsTypes[functionCategory]
            {
                ForEach(Array(parameterSignatures.keys.sorted()), id: \.self) { key in
                    Button(action: {
                        
                    }) {
                        Text(key)
                    }.onDrag {
                        resetDragProperties()
                        sharedState.newFunctionName = key
                        let itemProvider = NSItemProvider(object: "YourDraggedData" as NSItemProviderWriting)
                        return itemProvider
                    }
                }
            }
        }.padding(.vertical, 40)
    }
}

struct FunctionCatalogContainer: View {
    @EnvironmentObject var sharedState: SharedState
    @State private var selectedTabIndex = 0 // 追踪选中的标签索引
    var body: some View {
        ZStack {
            TopColorGradient(color: .cyan)
            TabView(selection: $selectedTabIndex) {
                ForEach(Array(functionPropsTypes.keys.sorted()), id: \.self) { key in
                    FunctionCatalog(functionCategory: key)
                        .tabItem {
                            Text(key)
                        }
                }
            }
        }
    }
}

切换标签页时，FunctionCatalog始终显示第一个标签对应的列表内容，不会随标签切换更新。

解决方案 #

修复onChange不触发的问题 #

TabView的selection绑定需要和每个标签页的tag一一对应，你之前的代码没给标签页设置tag，导致TabView无法正确更新绑定值，自然不会触发onChange。

方案1：用索引作为tag

struct FunctionCatalogContainer: View {
    @EnvironmentObject var sharedState: SharedState
    @State private var selectedTabIndex = 0

    var body: some View {
        ZStack {
            TopColorGradient(color: .cyan)
            TabView(selection: $selectedTabIndex) {
                // 用enumerated()同时获取索引和键
                ForEach(Array(functionPropsTypes.keys.sorted()).enumerated(), id: \.element) { index, key in
                    Text(key)
                        .tabItem { Text(key) }
                        .tag(index) // 绑定索引作为tag
                }
            }
            .onChange(of: selectedTabIndex) { newIndex in
                let selectedKey = Array(functionPropsTypes.keys.sorted())[newIndex]
                sharedState.functionCategory = selectedKey
            }
        }
    }
}

方案2：直接用字典键作为绑定值（更直观）

struct FunctionCatalogContainer: View {
    @EnvironmentObject var sharedState: SharedState
    // 直接绑定选中的键，不用索引
    @State private var selectedKey: String = Array(functionPropsTypes.keys.sorted()).first ?? ""

    var body: some View {
        ZStack {
            TopColorGradient(color: .cyan)
            TabView(selection: $selectedKey) {
                ForEach(Array(functionPropsTypes.keys.sorted()), id: \.self) { key in
                    Text(key)
                        .tabItem { Text(key) }
                        .tag(key) // 用键作为tag
                }
            }
            .onChange(of: selectedKey) { newKey in
                sharedState.functionCategory = newKey
            }
        }
    }
}

修复子视图显示异常的问题 #

你给FunctionCatalog的functionCategory加了@State修饰符，这会让子视图自己持有这个状态，不会响应父视图传递的新值。把@State改成普通常量即可：

struct FunctionCatalog: View {
    let functionCategory: String // 去掉@State，用普通常量
    @EnvironmentObject var sharedState: SharedState
    var body: some View {
        List {
            if let parameterSignatures = functionPropsTypes[functionCategory]
            {
                ForEach(Array(parameterSignatures.keys.sorted()), id: \.self) { key in
                    Button(action: {}) {
                        Text(key)
                    }.onDrag {
                        resetDragProperties()
                        sharedState.newFunctionName = key
                        let itemProvider = NSItemProvider(object: "YourDraggedData" as NSItemProviderWriting)
                        return itemProvider
                    }
                }
            }
        }.padding(.vertical, 40)
    }
}

同时配合上面TabView的tag设置，切换标签时父视图会传递正确的functionCategory，子视图就能自动更新内容了。

内容的提问来源于stack exchange，提问作者János