개발/SWIFT 아이폰 / / 2023. 7. 17. 15:56

SwiftUI 라디오 버튼 생성 및 선택 체크

반응형

라디오 버튼 생성 후 선택한 라디오 버튼에 따라 하단 버튼 색상을 변경

 

라디오 버튼 생성

struct RadioButtonField: 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)->()
    
    init(
        id: String,
        label:String,
        size: CGFloat = 20,
        color: Color = Color.black,
        bgColor: Color = Color.black,
        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 {
        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 var gender = ""
    
    var body: some View {
        VStack {
            HStack{
                RadioButtonField(
                    id: "Male",
                    label: "Male",
                    color:.red,
                    bgColor: .blue,
                    isMarked: $gender.wrappedValue == "Male" ? true : false,
                    callback: { selected in
                        self.gender = selected
                        print("Selected Gender is: \(selected)")
                    }
                )
                RadioButtonField(
                    id: "Female",
                    label: "Female",
                    color:.red,
                    bgColor: .blue,
                    isMarked: $gender.wrappedValue == "Female" ? true : false,
                    callback: { selected in
                        self.gender = selected
                        print("Selected Gender is: \(selected)")
                    }
                )
            }
            
            Button(action: {
                print("입력된 텍스트 \($gender)")
            }) {
                Text("출력하기")
                    .padding()
                    .foregroundColor(.white)
                    .background(isMele() ? Color.red : Color.blue) // 조건에 따라 색상 변경
                    .cornerRadius(10)
            }
            .padding()
        }.background(Color.white)
    }
    
    
    func isMele() -> Bool {
        if gender == "Male" {
            return true
        } else {
            return false
        }
    }
}
반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유