Is there a way to carry a variable/bool up and into a View's SuperView? - swift

Question

Say I were to have the follow sudocode as a View named Item
Item{
Rectangle()
.frame(width: 100, height: 50)
.onTapGesture{
isTapped.toggle()
}
}
And there were multiple Items in it's superview, Content
Content{
VStack{
Item()
Item()
Item()
}
}
Would there be a way for me to relay the variable/bool isTapped from Item, up and into it's superview with it still being Item specific? (So I know which Item has what isTapped value) so that for example, this would be possible?...
Content{
VStack{
Item().padding(.bottom, Item.isTapped ? 20 : 0)
Item().padding(.bottom, Item.isTapped ? 20 : 0)
Item().padding(.bottom, Item.isTapped ? 20 : 0)
}
}
edit: A key detail of note is that the number of Items would be generated dynamically by the user, so I can't for instance make a variable for each item

Answer 1

Declare the variable as #State in the parent and pass it into the child as #Binding.

Answer 2

A possible solution is:
First define a "Source of truth" Model
import SwiftUI
import Combine
import Foundation
enum itemType{
case itemTypeA
case itemTypeB
case itemTypeC
}
struct ItemModel: Identifiable {
var id: Int
var type: itemType
var isTapped: Bool = false
}
class ObserverModel: ObservableObject {
var didChange = PassthroughSubject<Void, Never>()
#Published var itemA: ItemModel = ItemModel(id: 1, type: .itemTypeA)
#Published var itemB: ItemModel = ItemModel(id: 2, type: .itemTypeB)
#Published var itemC: ItemModel = ItemModel(id: 3, type: .itemTypeC)
func toggleItem(itemType: itemType) {
switch itemType {
case .itemTypeA:
itemA.isTapped.toggle()
case .itemTypeB:
itemB.isTapped.toggle()
case .itemTypeC:
itemC.isTapped.toggle()
}
}
}
Your single ItemView should look like this:
import SwiftUI
struct ItemView: View {
#EnvironmentObject var observer: ObserverModel
#Binding var itemBinding: ItemModel
#State private var toggleColor = Color.red
var body: some View {
Rectangle()
.fill(toggleColor)
.frame(width: 100, height: 50)
.onTapGesture{
self.observer.toggleItem(itemType: self.itemBinding.type)
self.toggleColor = self.itemBinding.isTapped ? Color.green : Color.red
print("Item Bool: \(self.itemBinding.isTapped)")
}
}
}
struct ItemView_Previews: PreviewProvider {
static var previews: some View {
ItemView(itemBinding: .constant(ItemModel(id: 1, type: .itemTypeA))).environmentObject(ObserverModel())
}
}
Finally you put it all together:
import SwiftUI
struct ItemsView: View {
#EnvironmentObject var observer: ObserverModel
var body: some View {
HStack {
ItemView(itemBinding: $observer.itemA)
ItemView(itemBinding: $observer.itemB)
ItemView(itemBinding: $observer.itemC)
}
}
}
struct ItemsView_Previews: PreviewProvider {
static var previews: some View {
ItemsView().environmentObject(ObserverModel())
}
}
I uploaded this to github: https://github.com/ppoh71/SwiftUIButtonTest
(Built with GM2)
And I would recommend this video about the data flow in SwiftUI.
this should explain everything: https://developer.apple.com/videos/play/wwdc2019/226/