Home > Software engineering >  SwiftUI 3 buttons - Only one button should be toggled at the same time
SwiftUI 3 buttons - Only one button should be toggled at the same time

Time:11-23

So I created 3 buttons. They add points when toggle is true, or delete points when button toggle is put back to false again.

Now my question is: How can I make sure only one button is able to be toggled as True? So for example, when I press button "Yes", it turns green and adds points. But when I make up my mind, and change my choice to button "Sometimes", the button "Yes" should be toggled back to false and only "Sometimes" should be toggled true.

I'm breaking my head over this for quite some time. Can someone help me with this?


               Button("Yes") {
                    ShowButton.toggle()
                    ButtonYes.toggle()
                    if ButtonYes == true {
                    Xcode  = 5
                        } else { ButtonYes = false
                        Xcode -= 5
                        }
                    if ButtonYes == true {
                    Ycode  = 5
                        } else { ButtonYes = false
                        Ycode -= 5
                        }
                }
                .frame(width: 50, height: 50, alignment: .center)
                .foregroundColor(.white)
                .padding()
                .background(ButtonYes ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
                .cornerRadius(20)
                .shadow(color: .black, radius: 10, x: 10, y: 10)
                   
                    Button("No") {
                        ShowButton.toggle()
                        ButtonNo.toggle()
                        if ButtonNo == true {
                        Xcode  = 3
                            } else { ButtonNo = false
                            Xcode -= 3
                            }
                        if ButtonNo == true {
                        Ycode  = 3
                            } else { ButtonYes = false
                            Ycode -= 3
                            }
                        
                        
                    }
                    .frame(width: 50, height: 50, alignment: .center)
                    .foregroundColor(.white)
                    .padding()
                    .background(ButtonNo ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
                    .cornerRadius(20)
                    .shadow(color: .black, radius: 10, x: 10, y: 10)
                    
                    Button("Sometimes") {
                        ShowButton.toggle()
                        ButtonSometimes.toggle()
                        if ButtonSometimes == true {
                        Xcode  = 1
                            } else { ButtonSometimes = false
                            Xcode -= 1
                            }
                        if ButtonSometimes == true {
                        Ycode  = 1
                            } else { ButtonSometimes = false
                            Ycode -= 1
                            }
                      
                        
                    }
                    .frame(width: 50, height: 50, alignment: .center)
                    .foregroundColor(.white)
                    .padding()
                    .background(ButtonSometimes ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
                    .cornerRadius(20)
                    .shadow(color: .black, radius: 10, x: 10, y: 10)
                }  

CodePudding user response:

You should use the state to re-render your buttons every time when you need it. Here is code that I have written based on your but with using @State wrapper.

enum Options {
    case yes, no, sometimes
}

struct TestButtonView: View {
    
    // Selected option state
    @State private var selectedOption: Options?
    // Answer state, that we injecting in view init
    @State var answer: Options
    // Score
    @State var Xcode: Int = 0
    @State var Ycode: Int = 0
    
    var body: some View {
        HStack {
            Group {
                Button("Yes") {
                    // Setting selected button
                    selectedOption = .yes
                    
                    // Your score magick code
                    if selectedOption == .yes {
                        Xcode  = 5
                    } else {
                        Xcode -= 5
                    }
                    if selectedOption == .yes {
                        Ycode  = 5
                    } else {
                        Ycode -= 5
                    }
                }
                .frame(width: 50, height: 50, alignment: .center)
                .padding()
                // Here we make button green if it's correct answer
                .background(Options.yes == answer && selectedOption == .yes ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
                
                Button("No") {
                    // Setting selected button
                    selectedOption = .no
                    
                    // Your score magick code
                    if selectedOption == .no {
                        Xcode  = 3
                    } else {
                        Xcode -= 3
                    }
                    if selectedOption == .no {
                        Ycode  = 3
                    } else {
                        Ycode -= 3
                    }
                    
                    
                }
                .frame(width: 50, height: 50, alignment: .center)
                .padding()
                // Here we make button green if it's correct answer
                .background(Options.no == answer && selectedOption == .no ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
                
                Button("Sometimes") {
                    // Setting selected button
                    selectedOption = .sometimes
                    
                    // Your score magick code
                    if selectedOption == .sometimes {
                        Xcode  = 1
                    } else {
                        Xcode -= 1
                    }
                    if selectedOption == .sometimes {
                        Ycode  = 1
                    } else {
                        Ycode -= 1
                    }
                }
                .frame(width: 50, height: 50, alignment: .center)
                .padding()
                // Here we make button green if it's correct answer
                .background(Options.sometimes == answer && selectedOption == .sometimes ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
            }
            // Grouping view for better code readability
            .frame(width: 50, height: 50, alignment: .center)
            .foregroundColor(.white)
            .padding()
            .cornerRadius(20)
            .shadow(color: .black, radius: 10, x: 10, y: 10)
        }
    }
}

// Here preview and you can play with it on canvas
struct TestButtonView_Previews: PreviewProvider {
    static var previews: some View {
        TestButtonView(answer: .yes)
    }
}

CodePudding user response:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var btnSomething: UIButton!
@IBOutlet weak var btnNo: UIButton!
@IBOutlet weak var btnYes: UIButton!

private var btnArry: [UIButton] = []
override func viewDidLoad() {
    super.viewDidLoad()
    btnArry = [btnSomething,btnYes,btnNo]
    // Do any additional setup after loading the view.
}

// MARK:- Toggle
private func toggleButton(_ sender: UIButton) {
    for i in btnArry {
        if i == sender {
            i.backgroundColor = .blue
        } else {
            i.backgroundColor = .white
        }
    }
}

@IBAction func btnYes(_ sender: UIButton) {
    toggleButton(sender)
}

@IBAction func btnNo(_ sender: UIButton) {
    toggleButton(sender)
}
@IBAction func btnSomething(_ sender: UIButton) {
    toggleButton(sender)
}
}
  • Related