How to put RadioButtons into Form? - ios

Question

I following the link to create RadioButtons.
import SwiftUI
//MARK:- Single Radio Button Field
struct RadioButtonField: View {
let id: String
let label: String
let size: CGFloat
let color: Color
let textSize: CGFloat
let isMarked:Bool
let callback: (String)->()
init(
id: String,
label:String,
size: CGFloat = 20,
color: 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.textSize = textSize
self.isMarked = isMarked
self.callback = callback
}
var body: some View {
Button(action:{
self.callback(self.id)
}) {
HStack(alignment: .center, spacing: 10) {
Image(systemName: self.isMarked ? "largecircle.fill.circle" : "circle")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: self.size, height: self.size)
Text(label)
.font(Font.system(size: textSize))
Spacer()
}.foregroundColor(self.color)
}
.foregroundColor(Color.white)
}
}
//MARK:- Group of Radio Buttons
enum Gender: String {
case male = "Male"
case female = "Female"
}
struct RadioButtonGroups: View {
let callback: (String) -> ()
#State var selectedId: String = ""
var body: some View {
VStack {
radioMaleMajority
radioFemaleMajority
}
}
var radioMaleMajority: some View {
RadioButtonField(
id: Gender.male.rawValue,
label: Gender.male.rawValue,
isMarked: selectedId == Gender.male.rawValue ? true : false,
callback: radioGroupCallback
)
}
var radioFemaleMajority: some View {
RadioButtonField(
id: Gender.female.rawValue,
label: Gender.female.rawValue,
isMarked: selectedId == Gender.female.rawValue ? true : false,
callback: radioGroupCallback
)
}
func radioGroupCallback(id: String) {
selectedId = id
callback(id)
}
}
struct ContentView: View {
var body: some View {
HStack {
Text("Gender")
.font(Font.headline)
RadioButtonGroups { selected in
print("Selected Gender is: \(selected)")
}
}.padding()
}
}
The code above works well. But when I put the HStack of RadioButtons into Form, the RadioButtons does not work. I cannot select the RadioButtons in this situation. The code is as following:
Form {
HStack {
Text("Gender")
.font(Font.headline)
RadioButtonGroups { selected in
print("Selected Gender is: \(selected)")
}
}.padding()
}
Thanks for any help.

Answer 1

Use instead the following body for RadioButtonField (tested with Xcode 11.4)
var body: some View {
HStack(alignment: .center, spacing: 10) {
Image(systemName: self.isMarked ? "largecircle.fill.circle" : "circle")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: self.size, height: self.size)
Text(label)
.font(Font.system(size: textSize))
Spacer()
}.foregroundColor(self.color)
.onTapGesture {
self.callback(self.id)
}
}