SwiftUI自定义按钮实现Picker式地图视图切换问题

我希望在SwiftUI中实现类似Picker的地图视图切换功能，但默认SegmentedPickerStyle的样式不符合预期，想要自定义三个按钮来实现该选择效果。目前尝试的代码点击按钮无响应，无法触发log.info输出，同时不清楚如何为按钮添加类似Picker的.tag标记来关联选择状态。

原有Picker代码 #

struct MapDisplaySheetView: View {
    
    @ObservedObject var mapSettings = MapSettings()
    @State var mapType = 0
    
    @State var allItems: [String] = [
        "Standard",
        "Hybrid",
        "Image",
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            // MARK: Map Type
            HStack {
                Picker(
                    "Map Type",
                    selection: $mapType,
                    content: {
                        ForEach(allItems, id: \.self) { item in
                            VStack {
                                HStack {
                                    VStack {
                                        Text(item)
                                            .font(.footnote.weight(.bold))
                                            .frame(maxWidth: .infinity, alignment: .leading)
                                            .clipped()
                                            .foregroundColor(.primary)
                                    }
                                }
                                .padding(8)
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                .clipped()
                            }
                            .border(.red)
                            .background {
                                RoundedRectangle(cornerRadius: 4, style: .continuous)
                                .foregroundColor(Color(.systemFill))
                            }
                            .foregroundColor(Color(.quaternaryLabel))
                            .cornerRadius(8)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .clipped()
                        }
                    })
                .pickerStyle(SegmentedPickerStyle())
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            .clipped()
            .padding(.bottom, 4)
        }
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .clipped()
    }
}

尝试的按钮代码 #

struct MapDisplaySheetView: View {
    
    @ObservedObject var mapSettings = MapSettings()
    @State var mapType = 0
    
    @State var allItems: [String] = [
        "Standard",
        "Hybrid",
        "Image",
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                ForEach(allItems, id: \.self) { item in
                    VStack {
                        HStack {
                            VStack {
                                Button(action: {
                                    // Action
                                }, label: {
                                    Text(item)
                                })
                                .tag(mapSettings.mapType)
                                .onChange(of: mapType) { newValue in
                                    mapSettings.mapType = newValue
                                    log.info("We have selected \(newValue)")
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

问题分析与修复方案 #

1. 按钮无响应原因：按钮的action闭包为空，没有更新选中状态的逻辑；tag绑定逻辑错误，无法关联选择状态。
2. 核心修复思路：通过索引跟踪选中状态，点击按钮时直接更新状态并同步到mapSettings，同时根据选中状态自定义按钮样式。

修复后的完整代码 #

struct MapDisplaySheetView: View {
    
    @ObservedObject var mapSettings = MapSettings()
    // 用索引绑定三个选项：0=Standard，1=Hybrid，2=Image
    @State private var selectedIndex = 0
    
    private let mapTypes: [String] = [
        "Standard",
        "Hybrid",
        "Image",
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 8) { // 可自定义按钮间距
                ForEach(Array(mapTypes.enumerated()), id: \.element) { index, type in
                    Button(action: {
                        selectedIndex = index
                        mapSettings.mapType = index
                        print("已选择地图类型：\(type)（索引\(index)）")
                    }) {
                        Text(type)
                            .font(.footnote.weight(.bold))
                            .padding(.vertical, 8)
                            .padding(.horizontal, 16)
                            .frame(maxWidth: .infinity)
                            // 根据选中状态切换样式
                            .background(selectedIndex == index ? Color(.systemFill) : Color.clear)
                            .foregroundColor(selectedIndex == index ? .primary : .quaternaryLabel)
                            .cornerRadius(8)
                    }
                }
            }
            .padding(16)
        }
        .frame(maxWidth: .infinity)
    }
}

// 参考的MapSettings定义
class MapSettings: ObservableObject {
    @Published var mapType = 0
}

关键改进点 #

• 索引关联选中状态：通过enumerated()遍历选项的索引和内容，用selectedIndex跟踪当前选中项，替代Picker的tag逻辑。
• 自定义样式控制：根据selectedIndex动态切换按钮的背景色和文字颜色，模拟原生Picker的选中效果，可按需调整样式细节。
• 直接处理动作逻辑：在按钮action中同步更新selectedIndex和mapSettings，并打印日志，无需额外的onChange监听（若需监听外部对mapSettings的修改，可再添加onChange）。

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