Binding value changes only once - swift

Question

I have the following View structure and run into the problem of the button working the first time I click and disabling the button like it should, but once I clicked one button it does not work for the other buttons. The Item is always the right one, I checked that by printing it out.
My ReelsView:
struct ReelsView: View {
#State var currentReel = ""
#State var items: [Item] = [
Item(chance: "1:1m", tradeIn: 2000, name: "Apple Watch", price: "$200", rarityType: "common", description: "The Apple Watch", reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "apple-watch", ofType: "mp4") ?? "")), bid: false)),
Item(chance: "1:20m", tradeIn: 27500, name: "Ibiza vacation", price: "$2750,00", rarityType: "superRare", description: "Such a wonderful place for a vacation", reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "ibiza", ofType: "mp4") ?? "")), bid: false)),
]
var body: some View {
TabView(selection: $currentReel) {
ForEach($items) { $reel in
ReelsPlayer(reel: $reel.reel, currentReel: $currentReel, item: $reel)
.tag(reel.reel.id)
}
}
}
}
My ReelsPlayer:
struct ReelsPlayer: View {
#Binding var reel: Reel
#Binding var currentReel: String
#Binding var item: Item
var body: some View {
ZStack {
if let player = reel.player {
CustomVideoPlayer(player: player)
.allowsHitTesting(false)
}
}
.overlay {
BottomOverlay(item: $item)
.allowsHitTesting(true)
}
}
}
My BottomOverlay:
struct BottomOverlay: View {
#Binding var item: Item
var body: some View {
Button() {
item.reel.bid.toggle()
print("item: ", item)
print("item: ", $item)
} label: {
Text(item.reel.bid ? "Already Bid" : "Bid")
}
}
}
struct Reel: Identifiable {
var id = UUID().uuidString
var player: AVPlayer
var bid: Bool
}
struct Item: Identifiable, Hashable {
static func == (lhs: Item, rhs: Item) -> Bool {
lhs.id == rhs.id
}
func hash(into hasher: inout Hasher) {
hasher.combine(chance)
hasher.combine(name)
hasher.combine(price)
hasher.combine(tradeIn)
hasher.combine(rarityType)
hasher.combine(description)
}
var id: String = UUID().uuidString
var chance: String
var tradeIn: Int
var name: String
var price: String
var rarityType: String
var description: String
var reel: Reel
}

Answer 1

Here is the code I used in my test, to show that the two buttons acts separately. Click on one, and it print the item id and state. Click on the other, and same for that item. If you un-comment .disabled(item.clicked), then it only works once, because the Button (for that item) is now disabled.
struct Item: Identifiable {
let id = UUID()
var name: String
var clicked: Bool
}
struct ContentView: View {
var body: some View {
MainView()
}
}
struct MainView: View {
#State var items: [Item] = [Item(name: "item1", clicked: false),Item(name: "item2", clicked: false)]
var body: some View {
ForEach($items) { $item in
ItemView(item: $item)
}
}
}
struct ItemView: View {
#Binding var item: Item
var body: some View {
VStack {
Color.green
}.overlay {
OverlayView(item: $item)
}
}
}
struct OverlayView: View {
#Binding var item: Item
var body: some View {
VStack (spacing: 33){
Button() {
item.clicked.toggle()
print("--> item.id: \(item) item.clicked: \(item.clicked)")
} label: {
Text(item.name)
}//.disabled(item.clicked)
// Button() {
// item.clicked.toggle()
// } label: {
// Text("enable again")
// }
}
}
}
EDIT-1: in view of your new code. Try this example code, works well for me
import Foundation
import SwiftUI
import UIKit
import AVFoundation
import AVKit
struct ContentView: View {
var body: some View {
ReelsView()
}
}
struct ReelsView: View {
#State var currentReel = ""
#State var items: [Item] = [
Item(chance: "1:1m", tradeIn: 2000, name: "Apple Watch", price: "$200", rarityType: "common", description: "The Apple Watch", reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "apple-watch", ofType: "mp4") ?? "")), bid: false)),
Item(chance: "1:20m", tradeIn: 27500, name: "Ibiza vacation", price: "$2750,00", rarityType: "superRare", description: "Such a wonderful place for a vacation", reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "ibiza", ofType: "mp4") ?? "")), bid: false)),
]
var body: some View {
TabView(selection: $currentReel) {
ForEach($items) { $item in
ReelsPlayer(currentReel: $currentReel, item: $item) // <-- here
.tag(item.reel.id)
}
}.tabViewStyle(.page) // <-- here
}
}
struct ReelsPlayer: View {
#Binding var currentReel: String
#Binding var item: Item // <-- here
var body: some View {
ZStack {
if let player = item.reel.player { // <-- here
// CustomVideoPlayer(player: player)
// for testing
VStack {
if item.name == "Apple Watch" { Color.yellow } else { Color.green }
}
.allowsHitTesting(false)
}
}
.overlay {
BottomOverlay(item: $item)
.allowsHitTesting(true)
}
}
}
struct BottomOverlay: View {
#Binding var item: Item
var body: some View {
Button() {
item.reel.bid.toggle()
print("----> BottomOverlay item.reel.bid: ", item.reel.bid) // <-- here
} label: {
Text(item.reel.bid ? "Already Bid" : "Bid")
}
}
}
struct Reel: Identifiable, Hashable { // <-- here
var id = UUID().uuidString
var player: AVPlayer
var bid: Bool
}
struct Item: Identifiable, Hashable { // <-- here
var id: String = UUID().uuidString
var chance: String
var tradeIn: Int
var name: String
var price: String
var rarityType: String
var description: String
var reel: Reel
}