SwiftUI自定义Picker故障：selectedEntityType无法更新

问题根源分析 #

1. 点击事件冲突：ReusableNavigationBarCell内部的Button未绑定任何动作，且外部的onTapGesture会被Button的点击事件拦截，导致更新selectedEntityType的代码无法执行。
2. 状态作用域问题：selectedEntityType用@State定义在ReusableNavigationBar内部，主视图无法感知到该状态的变化——若要实现主视图切换，必须将状态提升到父视图并通过@Binding传递。

修复代码 #

1. 修改ReusableNavigationBarCell，添加点击回调与选中状态

import SwiftUI

struct ReusableNavigationBarCell: View {
    var text: String
    var isSelected: Bool // 用于判断当前选项是否选中
    var onTap: () -> Void // 点击回调，触发状态更新
    
    var body: some View {
        Button(action: onTap) { // 绑定点击动作到回调
            Text(text)
                .padding()
                .foregroundColor(.white)
                .background(
                    Rectangle()
                        .fill(isSelected ? Color("active") : Color.gray) // 根据选中状态切换背景色
                        .cornerRadius(8)
                        .frame(height: 36)
                )
        }
    }
}

struct ReusableNavigationBarCell_Previews: PreviewProvider {
    static var previews: some View {
        ReusableNavigationBarCell(text: "Stories for falling asleep", isSelected: true, onTap: {})
    }
}

2. 修改ReusableNavigationBar，使用@Binding传递状态

import SwiftUI

struct ReusableNavigationBar: View {
    @Binding var selectedEntityType: EntityType // 改为@Binding，从父视图接收状态
    
    let rows = Array(repeating: GridItem(.fixed(30), spacing: 0, alignment: .leading), count: 1)
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHGrid(rows: rows, spacing: 8) {
                ForEach(EntityType.allCases, id: \.self) { type in
                    ReusableNavigationBarCell(
                        text: type.name(),
                        isSelected: selectedEntityType == type, // 传递当前选项的选中状态
                        onTap: {
                            selectedEntityType = type // 在回调中更新选中状态
                        }
                    )
                }
            }
        }
        .frame(height: 38)
        .padding(.bottom, 10)
        .padding(.horizontal, 10.0)
    }
}

struct ReusableNavigationBar_Previews: PreviewProvider {
    static var previews: some View {
        ReusableNavigationBar(selectedEntityType: .constant(.all)) // 预览用constant绑定状态
            .background(.yellow)
    }
}

3. 主视图中使用示例

struct MainView: View {
    @State private var selectedType = EntityType.all // 状态定义在主视图
    
    var body: some View {
        VStack {
            // 传递绑定状态到导航栏
            ReusableNavigationBar(selectedEntityType: $selectedType)
            
            // 根据选中状态切换主视图内容
            switch selectedType {
            case .all:
                Text("全部睡眠故事视图")
            case .album:
                Text("自然声音视图")
            case .song:
                Text("睡眠冥想视图")
            }
        }
    }
}

修复说明 #

• 移除了无效的onTapGesture，让Button直接触发状态更新，避免事件拦截。
• 通过@Binding将选中状态的控制权交给主视图，确保主视图能实时感知状态变化并切换内容。
• 增加了选中样式的视觉反馈，用户可以直观看到当前选中的选项。

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