SwiftUI分组按钮选中时图标颜色切换异常排查

核心问题分析 #

1. 共用状态导致批量变色：你用单个Bool类型状态tappedActiveMapAnnotationButton同时控制两个按钮的颜色，点击任一按钮都会触发该状态变为true，导致两个按钮颜色同步变化，完全不符合“单个按钮独立状态”的需求。
2. 状态未重置：点击按钮时仅将状态设为true，但操作完成（弹窗关闭、过滤器状态切换完成）后未将状态重置为false，导致颜色无法恢复到初始的Color.secondary，甚至出现退出视图后状态残留的问题。
3. 默认按钮样式干扰：SwiftUI默认Button样式会在点击时覆盖自定义foregroundColor，你看到的“浅灰色”是按钮默认高亮样式，而非自定义设置的颜色。

修改后的完整代码 #

// 定义枚举标记当前激活的按钮，替代单个Bool状态
enum ActiveButton {
    case filter, map
}

@State private var activeButton: ActiveButton?
@State private var showMapDisplaySheet = false

VStack {
    Button(action: {
        withAnimation(.spring()) {
            // 标记当前激活的是过滤器按钮
            activeButton = .filter
            mainViewModel.showFilters.toggle()
        }
        // 动画结束后重置状态，恢复初始颜色
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
            activeButton = nil
        }
    }, label: {
        Image(systemName: "slider.horizontal.3")
            .font(.title3)
            .padding(10)
            .foregroundColor(activeButton == .filter ? .accentColor : Color.secondary)
    })
    // 去掉默认按钮样式，避免自定义颜色被覆盖
    .buttonStyle(PlainButtonStyle())

    Button(action: {
        withAnimation(.spring()) {
            // 标记当前激活的是地图按钮
            activeButton = .map
            showMapDisplaySheet.toggle()
        }
    }, label: {
        Image(systemName: "map")
            .font(.title3)
            .padding(10)
            .foregroundColor(activeButton == .map ? .accentColor : Color.secondary)
    })
    .buttonStyle(PlainButtonStyle())
    .sheet(isPresented: $showMapDisplaySheet) {
        MapDisplaySheetView()
            .presentationDetents([.fraction(0.25)])
    }
    // 监听弹窗关闭事件，重置状态恢复颜色
    .onChange(of: showMapDisplaySheet) { isPresented in
        if !isPresented {
            activeButton = nil
        }
    }
}
.background {
    RoundedRectangle(cornerRadius: 8)
        .fill(Color(uiColor: .systemBackground))
}

关键修改说明 #

1. 改用枚举管理独立状态：用ActiveButton枚举替代单个Bool，精准标记当前点击的按钮，确保每个按钮的颜色状态独立可控。
2. 添加状态重置逻辑：
   • 过滤器按钮：通过asyncAfter在动画结束后自动重置状态，恢复初始颜色。
   • 地图按钮：监听弹窗的isPresented状态，弹窗关闭时立即重置状态。
3. 移除默认按钮样式：给按钮添加.buttonStyle(PlainButtonStyle())，避免默认点击高亮样式覆盖自定义foregroundColor，确保颜色设置生效。

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