SwiftUI：为非按钮可点击组件处理isEnabled样式状态

核心问题原因 #

disabled(_:)修饰符设置的\.isEnabled环境变量不会自动流入自定义ControlStyle的上下文，需要手动在自定义控件中完成环境变量的传递。

方案一：直接向ControlStyle传递isEnabled参数 #

这种方式简单直接，通过参数将状态传入样式：

1. 定义带isEnabled参数的ControlStyle #

struct MyControlStyle: ControlStyle {
    let isEnabled: Bool

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(isEnabled ? Color.blue : Color.gray)
            .foregroundColor(isEnabled ? .white : .black.opacity(0.5))
            .cornerRadius(8)
            .opacity(isEnabled ? 1 : 0.6)
    }
}

2. 自定义控件中捕获环境变量并传递给样式 #

struct MyControl: View {
    @Environment(\.isEnabled) private var isEnabled
    let label: String

    var body: some View {
        Text(label)
            .controlStyle(MyControlStyle(isEnabled: isEnabled))
            // 手动处理交互禁用
            .onTapGesture {
                guard isEnabled else { return }
                // 执行控件点击逻辑
                print("自定义控件被触发")
            }
    }
}

3. 使用时直接调用disabled(_:) #

struct ContentView: View {
    @State private var disableControl = true

    var body: some View {
        VStack(spacing: 20) {
            MyControl(label: "测试自定义控件")
                .disabled(disableControl)

            Button("切换禁用状态") {
                disableControl.toggle()
            }
        }
        .padding()
    }
}

方案二：将环境变量注入到ControlStyle上下文 #

如果希望保持ControlStyle通过@Environment读取状态的方式，可在自定义控件中主动传递环境变量：

1. 定义读取环境变量的ControlStyle #

struct MyControlStyle: ControlStyle {
    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(isEnabled ? Color.blue : Color.gray)
            .foregroundColor(isEnabled ? .white : .black.opacity(0.5))
            .cornerRadius(8)
            .opacity(isEnabled ? 1 : 0.6)
    }
}

2. 自定义控件中传递环境变量 #

struct MyControl: View {
    @Environment(\.isEnabled) private var isEnabled
    let label: String

    var body: some View {
        Text(label)
            // 将当前环境的isEnabled传递给子视图（包括ControlStyle）
            .environment(\.isEnabled, isEnabled)
            .controlStyle(MyControlStyle())
            .onTapGesture {
                guard isEnabled else { return }
                print("自定义控件被触发")
            }
    }
}

3. 使用方式与方案一一致 #

直接通过disabled(_:)修饰符控制控件状态即可。

关键注意点 #

• 自定义控件的交互逻辑必须手动判断isEnabled，避免禁用状态下仍能响应事件；
• 若自定义控件包含子视图，需确保disabled(_:)的环境变量能传递到所有需要的层级。

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