There’s lots of good stuff in SwiftUI. One missing control is old fashioned checkbox like I have on the web or on my Mac. There is a way to make a checkbox with a Toggle control. However, as a bit of a intro to the philosophy of SwiftUI, let look at creating a checkbox.
Open up the project I have in the exercise files. I made a second struct
CheckView
for the checkbox.. My checkbox needs a box. I can use the Image
object in SwiftUI with the systemName
parameter to get a SFSymbol from SwiftUI.
Image(systemName: "square")
The checked square is simply the word checkmark before the square.
Image(systemName: "checkmark.square")
I just have to switch between them. That will need some kind of variable. I’ll add this
var isChecked:Bool = false
In SwiftUI we avoid if...then...else
control structures and defer to conditional operators. I can re-write the Image
like this
Image(systemName: isChecked ? "checkmark.square" : "square")
Now if false
I get a square, and if true
I get a checked square. I would have to change the parameter to do that, and I could only do that once for a given checkbox. I could write a function toggle like this:
func toggle(){isChecked = !isChecked}
But that gives me an error. Within aView
, values are immutable. But you can change them by adding @State
infront of the var.
That makes this variable a state variable.
@State var isChecked:Bool = false
Not only can you change it, but any change to it updates the view. So anytime toggle
runs, the image will change.
So how does the toggle
run? In a button, making toggle the action and make the image the label for the button.
Button(action: toggle){ Image(systemName: isChecked ? "checkmark.square" : "square") }
Let’s try this out. I’ll run this on an iPhone XR simulator. And I can tap the checkmark.
Of course there’s two more things I can can do. One is make the check mark a lot bigger that that. The other is add text for a title. Text will be through another variable
var title:String
This one won’t need a state since I’m only going to display it, not change it. I’ll add a HStack
in the button to keep the checkmark and text next to each other , then add the text.
Button(action: toggle){ HStack{ Image(systemName: isChecked ? "checkmark.square" : "square") Text(title) } }
And fix the preview to match.
CheckView(title:"Title")
Head over to ContentView
. Change the title to something bigger.
CheckView(title:"Likes Pizza") .font(.title)
Run again and you get a nice checkmark control, ready to use. Buttons are tap only actions in SwiftUI, but there is a lot you can do with buttons paired up with a state variable.
The Whole Code
You’ll find code for this lesson In GitHub here. There is aslo a video of this at LinkedIn learning. But the basic check box looks like this:
struct CheckView: View { @State var isChecked:Bool = false var title:String func toggle(){isChecked = !isChecked} var body: some View { Button(action: toggle){ HStack{ Image(systemName: isChecked ? "checkmark.square": "square") Text(title) } } } }
By the way, that action can be reduced to a closure, so you can skip the function altogether if you wish to streamline.
Leave a Reply