iOS Training from beginner to advanced
Posted on October 16, 2019 by Steven Lipton
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.
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.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
This site may include links that provide monetary compensation to the owners of this site.
Pingback: Checklists in Swift UI – Make App Pie
Added the ability to respond to the interaction like a button.
public struct CheckBox: View {
public typealias UserInteraction = (Bool) -> ()
public var title: String
@State public var isChecked: Bool = false
public var changed: UserInteraction
private func toggle(){
isChecked = !isChecked
changed(isChecked)
}
public var body: some View {
Button(action: toggle){
HStack{
Image(systemName: isChecked ? “checkmark.square”: “square”)
Text(title)
}
}
}
}