SwiftUI Checkbox 생성

체크박스 생성 및 이미지 색상 변경

 

CustomCheckbox생성

/// CustomCheckbox는 선택 상태를 나타내는 체크박스와 라벨을 표시하는 SwiftUI 뷰입니다.
struct CustomCheckbox: View {
    let id: String
    let label: String
    let size: CGFloat
    let color: Color
    let bgColor: Color
    let textSize: CGFloat
    let isChecked: Bool
    let callback: (String, Bool) -> ()
    
    /// CustomCheckbox 초기화
    /// - Parameters:
    ///   - id: 선택지의 고유 식별자
    ///   - label: 체크박스 옆에 표시될 라벨
    ///   - size: 체크박스의 크기 (기본값: 20)
    ///   - color: 체크박스의 색상 (기본값: Color.black)
    ///   - bgColor: 체크박스의 배경색 (기본값: Color.black)
    ///   - textSize: 라벨 텍스트의 크기 (기본값: 14)
    ///   - isChecked: 선택 상태 (true: 선택됨, false: 선택되지 않음) (기본값: false)
    ///   - callback: 선택 상태가 변경될 때 호출될 클로저
    init(
        id: String,
        label: String,
        size: CGFloat = 20,
        color: Color = Color.blue,
        bgColor: Color = Color.red,
        textSize: CGFloat = 14,
        isChecked: Bool = false,
        callback: @escaping (String, Bool) -> ()
    ) {
        self.id = id
        self.label = label
        self.size = size
        self.color = color
        self.bgColor = bgColor
        self.textSize = textSize
        self.isChecked = isChecked
        self.callback = callback
    }
    
    var body: some View {
        // 체크박스를 누르면 callback 클로저가 호출되도록 Button으로 구현
        Button(action: {
            self.callback(self.id, !self.isChecked)
        }) {
            HStack(alignment: .center) {
                // 선택 상태에 따라 체크된 체크박스 아이콘 또는 빈 체크박스 아이콘 표시
                Image(systemName: self.isChecked ? "checkmark.square.fill" : "square")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: self.size, height: self.size)
                    .foregroundColor(self.bgColor)
                Text(label)
                    .font(Font.system(size: textSize))
                Spacer()
            }
            .foregroundColor(self.color)
        }
        .foregroundColor(Color.white)
    }
}

 

체크박스 추가

struct ContentView: View {
    @State private var isChecked: Bool = false

    var body: some View {
        VStack {
            // CustomCheckbox를 사용하여 체크박스 표시
            CustomCheckbox(id: "checkbox1", label: "Checkbox Option", isChecked: isChecked) { id, checked in
                // 체크박스 선택 상태가 변경될 때 호출되는 클로저
                self.isChecked = checked
            }
            
            // 선택된 상태 출력
            Text("Is Checked: \(isChecked ? "True" : "False")")
        }
        .padding()
    }
}