SwiftUI开发MacOS应用：如何实现三态复选框？

官方支持情况 #

目前SwiftUI（截至macOS 14 Sonoma）没有提供原生的分组三态复选框组件，官方的Checkbox（macOS 13+引入）仅支持选中/未选中双态，无法直接实现「部分选中」的状态逻辑，因此需要基于SF Symbols和自定义状态逻辑来构建需求功能。

自定义实现方案 #

1. 定义复选框状态枚举 #

先统一三种状态的枚举类型，方便后续逻辑判断：

enum CheckboxState: Equatable {
    case unchecked, partial, checked
}

2. 构建分组数据模型 #

用可观察对象管理分组的子选项状态，通过计算属性自动推导分组的整体状态：

class GroupModel: ObservableObject {
    let name: String
    @Published var items: [Bool]
    
    init(name: String, itemCount: Int) {
        self.name = name
        self.items = Array(repeating: false, count: itemCount)
    }
    
    // 根据子选项状态自动计算分组的三态
    var state: CheckboxState {
        let allChecked = items.allSatisfy { $0 }
        let noneChecked = items.allSatisfy { !$0 }
        if allChecked {
            return .checked
        } else if noneChecked {
            return .unchecked
        } else {
            return .partial
        }
    }
}

3. 实现三态复选框组件 #

基于SF Symbols构建可点击的三态复选按钮，根据状态切换对应图标：

struct TriStateCheckbox: View {
    let state: CheckboxState
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Image(systemName: systemImageName)
                .font(.title2)
        }
        .buttonStyle(.plain)
    }
    
    private var systemImageName: String {
        switch state {
        case .checked:
            return "checkmark.square.fill"
        case .partial:
            return "minus.square.fill"
        case .unchecked:
            return "square"
        }
    }
}

4. 构建分组视图 #

组合分组复选框和子选项列表，处理分组点击的全选/未选切换逻辑：

struct GroupedCheckboxView: View {
    @ObservedObject var group: GroupModel
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            // 分组标题+三态复选框
            HStack(spacing: 6) {
                TriStateCheckbox(state: group.state) {
                    // 点击逻辑：全选状态切换为未选，其他状态切换为全选
                    let targetState = group.state == .checked ? false : true
                    group.items = Array(repeating: targetState, count: group.items.count)
                }
                Text(group.name)
                    .font(.headline)
            }
            
            // 子选项列表（缩进显示）
            VStack(alignment: .leading, spacing: 6) {
                ForEach(0..<group.items.count, id: \.self) { index in
                    HStack(spacing: 6) {
                        Checkbox("子选项 \(index + 1)", isChecked: $group.items[index])
                            .padding(.leading, 24)
                    }
                }
            }
        }
        .padding(.vertical, 4)
    }
}

5. 使用示例 #

在主视图中创建分组并展示：

struct ContentView: View {
    @StateObject private var basicComponents = GroupModel(name: "基础组件", itemCount: 3)
    @StateObject private var extendedFeatures = GroupModel(name: "扩展功能", itemCount: 2)
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            GroupedCheckboxView(group: basicComponents)
            GroupedCheckboxView(group: extendedFeatures)
        }
        .padding()
        .frame(width: 320, height: 280)
    }
}

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