How To Pre-Select CheckBox in SwiftUI - checkbox

Question

This is my CheckBoxField
How do I display a checkboxfield with a checkmark shows it was pre-checked already?
Here is how I use it. I would like to see the checkboxfield has a checkmark in there when loading like this one.
CheckboxField(
id: "Completed",
label: "Completed",
callback: self.checkboxSelected
)
func checkboxSelected(id: String, isMarked: Bool) {
print("This is done ->>> \(id) is marked: \(isMarked)")
}
import SwiftUI
struct CheckboxField: View {
let id: String
let label: String
let size: CGFloat
let color: Color
let textSize: Int
let callback: (String, Bool)->()
init(
id: String,
label:String,
size: CGFloat = 10,
color: Color = Color.black.opacity(0.68),
textSize: Int = 14,
callback: #escaping (String, Bool)->()
) {
self.id = id
self.label = label
self.size = size
self.color = color
self.textSize = textSize
self.callback = callback
}
#State var isMarked:Bool = false
var body: some View {
Button(action:{
self.isMarked.toggle()
self.callback(self.id, self.isMarked)
}) {
HStack(alignment: .center, spacing: 10) {
Image(systemName: self.isMarked ? "checkmark.square" : "square")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
Text(label)
.font(Font.system(size: size))
.foregroundColor(Color.black.opacity(0.87))
Spacer()
}.foregroundColor(self.color)
}
.foregroundColor(Color.white)
}
}

Answer 1

You can make
#State var isMarked:Bool = false
Into a Binding instead.
#Binding var isMarked: Bool
This way, you can access isMarked from both the superview and the checkmark view itself. You can also avoid using a closure.
Example:
struct ContentView: View {
#State var firstMarked = false
#State var secondMarked = true /// at load, the second one will be checked already
#State var thirdMarked = false
var body: some View {
VStack {
CheckboxField(id: "Completed", label: "Completed", isMarked: $firstMarked)
CheckboxField(id: "Completed", label: "Completed", isMarked: $secondMarked)
CheckboxField(id: "Completed", label: "Completed", isMarked: $thirdMarked)
}
.padding()
}
}
struct CheckboxField: View {
let id: String
let label: String
let size: CGFloat
let color: Color
let textSize: Int
#Binding var isMarked: Bool /// Binding here!
init(
id: String,
label:String,
size: CGFloat = 10,
color: Color = Color.black.opacity(0.68),
textSize: Int = 14,
isMarked: Binding<Bool>
) {
self.id = id
self.label = label
self.size = size
self.color = color
self.textSize = textSize
self._isMarked = isMarked /// to init, you need to add a _
}
var body: some View {
Button(action:{
self.isMarked.toggle() /// just toggle without closure
}) {
HStack(alignment: .center, spacing: 10) {
Image(systemName: self.isMarked ? "checkmark.square" : "square")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
Text(label)
.font(Font.system(size: size))
.foregroundColor(Color.black.opacity(0.87))
Spacer()
}.foregroundColor(self.color)
}
.foregroundColor(Color.white)
}
}
Result:

Answer 2

Change your isMarked State from false to true. Because #State should only be used in the current view, it's a best practice to make the isMarked variable private.
#State private var isMarked: Bool = true
This makes your Button checked when the view is getting loaded.
You can then access your button's state using #Binding in other views. The Binding and State variables have to have the same name otherwise, the Binding doesn`t know what to reference.