How to know which button is selected in SwiftUI? - swift

Question

I want to create 3 buttons. When I press on one button, I want that to be expand it with the x button. But instead of that, nothing happens. What am I doing wrong ? I will paste the code below.
This is the reutilizabile button I've created.
struct RCHChipView: View {
var rchChip: RCHChip
var action: () -> Void
init(
rchChip: RCHChip,
action: #escaping () -> Void) {
self.rchChip = rchChip
self.action = action
}
var body: some View {
HStack(spacing: 0) {
Button {
action()
} label: {
Text(rchChip.title)
}
if rchChip.isSelected {
Button {
rchChip.isSelected = false
} label: {
Image("NavigationCloseIcon")
.resizable()
}
}
}
}
}
struct RCHChip: Identifiable {
var id: String
var title: String
#Binding var isSelected: Bool
init(id: String = UUID().uuidString, title: String, isSelected: Binding<Bool> = .constant(false)) {
self.id = id
self.title = title
self._isSelected = isSelected
}
}
Here, I will show you how I'm trying to display the buttons.
#State private var rchChip: [RCHChip] = [RCHChip(title: "Datum"), RCHChip(title: "Person")]
HStack {
ForEach(rchChip) { chip in
RCHChipView(rchChip: rchChip.first(where: {$0.id == chip.id}) ?? RCHChip(id: "", title: "", isSelected: .constant(false))) {
chip.isSelected = true
}
}
}
How can I solve this issue ?

Answer 1

Your code is quite strange and I didn't really understand all of it but here is a solution that seems to work
First of all, you cannot use #Binding outside a View so I changed the struct to
struct RCHChip: Identifiable {
var id: String
var title: String
var isSelected: Bool
init(id: String = UUID().uuidString, title: String, isSelected: Bool = false) {
self.id = id
self.title = title
self.isSelected = isSelected
}
}
In the RCHChipView I found the definition of action strange since it didn't take any input nor returned anything. I changed it to the have the following signature
var action: (RCHChip) -> RCHChip
and to be able to modify a view property from outside of the view it needs to be a #Bindning so I changed rchChip to
#Binding var rchChip: RCHChip
the execution of the action property was then changed to
Button {
self.rchChip = action(rchChip)
}
And for the calling view I used the following code
#State private var rchChips: [RCHChip] = [RCHChip(title: "Datum"), RCHChip(title: "Person")]
var body: some View {
HStack {
ForEach($rchChips) { chip in
RCHChipView(rchChip: chip, action: { chip in
var copy = chip
copy.isSelected = true
return copy
})
}
}
}
I am sure this can be improved upon but it should be a step forward compared to your current solution and it does compile and run :)

Answer 2

I think this is to do with the behaviour of Binding variables.
Try:
struct RCHChipView: View {
var rchChip: RCHChip
var action: () -> Void
init(
rchChip: RCHChip,
action: #escaping () -> Void) {
self.rchChip = rchChip
self.action = action
}
var body: some View {
HStack(spacing: 0) {
Button {
action()
} label: {
Text(rchChip.title)
}
if rchChip.isSelected {
Button {
rchChip.isSelected.wrappedValue = false
} label: {
Image("NavigationCloseIcon")
.resizable()
}
}
}
}
}
The only difference being using the .wrappedValue for the Binding variable. Here's a slight change to the ForEach:
ForEach($rchChip) { $chip in
RCHChipView(
rchChip: chip,
action: { $chip.wrappedValue.isSelected = true }
)
}
$ is how you refer to Binding variables.