SwiftUI添加Toggle出现表达式歧义错误及暗黑模式切换实现问题

我来帮你搞定这两个问题，一步步来：

一、修复“Type of expression is ambiguous without more context”错误 #

这个错误的根源是你把buttonStyle修饰符应用到了整个VStack上——buttonStyle是专门给Button视图设计的修饰符，给包含Text的VStack添加这个修饰符会让SwiftUI的类型推断混乱，从而抛出歧义错误。

修复方法：把buttonStyle从VStack的修饰符链中移除，只单独应用到Button上：

Button("Hello world", action: { })
    .padding(20)
    .buttonStyle(NeumorphicButtonStyle(colorScheme: colorScheme)) // 移到这里

二、实现Toggle控制暗黑模式的功能 #

@Environment(\.colorScheme)是只读的，不能直接修改，所以我们需要自己维护一个状态变量来管理用户的颜色偏好，再通过环境修饰符覆盖系统的颜色方案：

具体步骤： #

1. 添加一个@State变量存储用户偏好的颜色方案，同时同步系统的颜色状态
2. 让Toggle的状态和这个偏好变量绑定，切换时更新颜色方案
3. 在视图根节点通过.environment(\.colorScheme, ...)应用用户的偏好设置

完整修正后的代码： #

import SwiftUI

struct ContentView: View {
    @Environment(\.colorScheme) private var systemColorScheme
    @State private var preferredColorScheme: ColorScheme?
    @State private var isDarkModeToggle: Bool = false
    
    private var currentColorScheme: ColorScheme {
        preferredColorScheme ?? systemColorScheme
    }
    
    var body: some View {
        ZStack {
            VStack {
                Text("Neumorphism")
                    .font(.system(size: 32, weight: .bold, design: .rounded))
                    .padding(20)
                
                Button("Hello world", action: { })
                    .padding(20)
                    .buttonStyle(NeumorphicButtonStyle(colorScheme: currentColorScheme)) // 修正：仅给Button加buttonStyle
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
            .background(backgroundColor)
            .edgesIgnoringSafeArea(.all)
            
            // 调整Toggle位置，避免被VStack遮挡
            Toggle(isOn: $isDarkModeToggle) {
                Text("Dark Mode")
            }
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(8)
            .shadow(radius: 2)
            .position(x: UIScreen.main.bounds.width - 100, y: 80)
            .onChange(of: isDarkModeToggle) { newValue in
                // 切换时更新偏好颜色方案
                preferredColorScheme = newValue ? .dark : .light
            }
            .onChange(of: systemColorScheme) { newScheme in
                // 当系统颜色变化且用户未手动设置时，同步Toggle状态
                if preferredColorScheme == nil {
                    isDarkModeToggle = newScheme == .dark
                }
            }
        }
        .environment(\.colorScheme, currentColorScheme) // 应用当前颜色方案
        .onAppear {
            // 初始时同步系统颜色到Toggle
            isDarkModeToggle = systemColorScheme == .dark
        }
    }
    
    var backgroundColor: Color {
        switch currentColorScheme {
        case .light: return NeumorphicButtonStyle.Appearance().lightColor
        case .dark: return NeumorphicButtonStyle.Appearance().darkColor
        @unknown default: return NeumorphicButtonStyle.Appearance().lightColor
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .environment(\.colorScheme, .light)
            ContentView()
                .environment(\.colorScheme, .dark)
        }
    }
}

// 假设你的NeumorphicButtonStyle实现如下（供参考）
struct NeumorphicButtonStyle: ButtonStyle {
    struct Appearance {
        let lightColor = Color(hex: "#f0f0f3")
        let darkColor = Color(hex: "#2a2a2e")
        // 这里需要Color的hex扩展，或者替换成系统颜色
    }
    
    let colorScheme: ColorScheme
    let appearance = Appearance()
    
    func makeBody(configuration: Configuration) -> some View {
        let baseColor = colorScheme == .light ? appearance.lightColor : appearance.darkColor
        return configuration.label
            .foregroundColor(.primary)
            .padding()
            .background(baseColor)
            .cornerRadius(12)
            .shadow(color: colorScheme == .light ? .black.opacity(0.1) : .white.opacity(0.1), radius: 8, x: 8, y: 8)
            .shadow(color: colorScheme == .light ? .white.opacity(0.7) : .black.opacity(0.7), radius: 8, x: -8, y: -8)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
    }
}

// 可选：Color的十六进制扩展
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

代码说明： #

1. 修复歧义错误：把buttonStyle仅应用到Button视图上，避免SwiftUI类型推断混乱
2. 暗黑模式控制：
   • 用preferredColorScheme存储用户手动设置的颜色方案，systemColorScheme获取系统默认方案
   • currentColorScheme优先使用用户设置，否则跟随系统
   • 通过onChange监听Toggle状态变化，更新颜色方案；同时监听系统颜色变化，在用户未手动设置时同步Toggle状态
   • 调整了Toggle的位置，避免被VStack遮挡，提升交互体验
3. 预览优化：同时预览浅色和暗黑模式，方便调试

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