SwiftUI RadioButton 생성

라디오 버튼 생성 및 이미지 색상 변경

 

CustomRadioButton 생성

struct CustomRadioButton: View {
    let id: String
    let label: String
    let size: CGFloat
    let color: Color
    let bgColor: Color
    let textSize: CGFloat
    let isMarked: Bool
    let callback: (String) -> ()
    
    /// RadioButtonField 초기화
    /// - Parameters:
    ///   - id: 선택지의 고유 식별자
    ///   - label: 라디오 버튼 옆에 표시될 라벨
    ///   - size: 라디오 버튼의 크기 (기본값: 20)
    ///   - color: 라디오 버튼의 색상 (기본값: Color.black)
    ///   - bgColor: 라디오 버튼의 배경색 (기본값: Color.black)
    ///   - textSize: 라벨 텍스트의 크기 (기본값: 14)
    ///   - isMarked: 선택지가 선택된 상태인지 여부 (기본값: false)
    ///   - callback: 선택지가 변경되었을 때 호출될 클로저
    init(
        id: String,
        label: String,
        size: CGFloat = 20,
        color: Color = Color.blue,
        bgColor: Color = Color.red,
        textSize: CGFloat = 14,
        isMarked: Bool = false,
        callback: @escaping (String) -> ()
    ) {
        self.id = id
        self.label = label
        self.size = size
        self.color = color
        self.bgColor = bgColor
        self.textSize = textSize
        self.isMarked = isMarked
        self.callback = callback
    }
    
    var body: some View {
        // 라디오 버튼을 누르면 callback 클로저가 호출되도록 Button으로 구현
        Button(action: {
            self.callback(self.id)
        }) {
            HStack(alignment: .center) {
                // 선택지가 선택되어 있으면 체크된 라디오 버튼 표시, 그렇지 않으면 빈 라디오 버튼 표시
                Image(systemName: self.isMarked ? "largecircle.fill.circle" : "circle")
                    .clipShape(Circle())
                    .foregroundColor(self.bgColor)
                Text(label)
                    .font(Font.system(size: textSize))
                Spacer()
            }
            .foregroundColor(self.color)
        }
        .foregroundColor(Color.white)
    }
}

 

라디오 버튼 추가

struct ContentView: View {
    @State private var selectedOption: String = "option1"

    var body: some View {
        VStack {
            // CustomRadioButton을 사용하여 선택지 표시
            CustomRadioButton(id: "option1", label: "Option 1", isMarked: selectedOption == "option1") { selectedId in
                // 선택지가 변경될 때 호출되는 클로저
                self.selectedOption = selectedId
            }.padding(10)

            CustomRadioButton(id: "option2", label: "Option 2", isMarked: selectedOption == "option2") { selectedId in
                self.selectedOption = selectedId
            }.padding(10)

            CustomRadioButton(id: "option3", label: "Option 3", isMarked: selectedOption == "option3") { selectedId in
                self.selectedOption = selectedId
            }.padding(10)
            
            // 선택된 옵션 출력
            Text("Selected Option: \(selectedOption)")
        }
        .padding()
    }
}