#State variables across multiple views and inside data arrays - Observables, Environment Published? - swiftui

Question

I've got myself in a bit of a pickle. I'm learning swift via a variety of online tutorials and at the same time coding a side project as further self learning. The side project will be a VERY basic football manager style app which I figure will give me a bit of UI, data handling, and algorithm refactoring practice. It is this side project where I have hit a blocker. I understand the principle of state variables to maintain a permanent link between an app state and the UI and I also understand the general principle of using observable objects / environment and and #Published to allow those variables to be available in multiple "views" however the implementation / syntax is eluding me.
The (lengthy) code below basically sets up a home screen on the UI where two teams abilities are compared. This is done via ability bars and a radar chart. Both the ability bar and the radar chart work correctly but I can't seem to link them to the same variable. The ability bar uses a series of #State variables called in the main content.view and then passed via $bindings from a child view to its parent but the radar plot is populated by local variables within a data array. I can't work out how to put the state variables into the array, either as is, or by using observable or environmental variables. Basically I want to declare the 6 variables in one location and then use them inside the array and also inside the various views.
I'd be really appreciative if someone could offer some suggestions or indeed to point me in a different direction if I am completely on a tangent with this.
By way of a quick summary...
First I have an ability bar view which creates something similar to a progress bar...
//Ability Bar View
struct abilityBar: View {
#Binding var value: Double
var color1: Color
var color2: Color
var title: String
var barHeight: Float
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading, spacing: -3) {
HStack {
Text("\(title)")
.modifier(lightFont())
Spacer()
Text("\(self.value, specifier: "%.1f")")
.modifier(heavyFont())
}
Spacer()
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 4)
.frame(width: geometry.size.width, height: CGFloat(barHeight))
.foregroundColor(.white)
.opacity(0.075)
RoundedRectangle(cornerRadius: 4)
.fill(LinearGradient(
gradient: Gradient(colors: [color1, color2]),
startPoint: .leading,
endPoint: .trailing))
.frame(width: ((CGFloat(self.value)/10) * geometry.size.width), height: CGFloat(barHeight))
}
}
}
}
}
Second I have a team widget view that nests these ability bars and is passed variables by way of $Bindings
//Team Widget View
struct teamWidget: View {
#Binding var defence: Double
#Binding var midfield: Double
#Binding var attack: Double
var color1: Color
var color2: Color
var location: String
var teamName: String
var position: String
var body: some View {
ZStack {
Rectangle()
.frame(height: 185.0)
.foregroundColor(Color(red: 0.23921568627450981, green: 0.24313725490196078, blue: 0.3215686274509804))
.shadow(color: .black, radius: 4, x: 4, y: 4)
HStack {
Rectangle()
.fill(LinearGradient(
gradient: Gradient(colors: [color1, color2]),
startPoint: .top,
endPoint: .bottom))
.frame(height: 185.0)
.frame(width: 8)
VStack(alignment: .leading) {
VStack(alignment: .leading, spacing: 0.0) {
Text("\(location)")
.modifier(lightFont())
Text("\(teamName)")
.modifier(heavyFont())
Text("League Position")
.modifier(lightFont())
Text("\(position)")
.modifier(heavyFont())
}
VStack(spacing: 4.0) {
abilityBar(value: $defence, color1: color1, color2: color2, title: "Defence", barHeight: 9.0)
.frame(height: 28)
abilityBar(value: $midfield, color1: color1, color2: color2, title: "Midfield", barHeight: 9.0)
.frame(height: 28)
abilityBar(value: $attack, color1: color1, color2: color2, title: "Attack", barHeight: 9.0)
.frame(height: 28)
}
}
Spacer()
}
}
}
}
These are populated in the main content view via #State variables. Also in the main content view is a data array that is used to draw a radar chart (main code in a separate .swift file. What I cant work out how to do is call the same #State variables in this array. Or whether I need to define the state variables differently (observable / environment etc). For reference in this large body of code I ahve commented 3 lines (1) - where the state variables are declared (2) where the data array for the radar chart is declared and where I currently cant get state variables or equivalent to work and (3) where the ability bars are declared (work with state variables)
Apologies for the long main / lots of code. I couldn't think of a way to cut this down further.
enum RayCase:String, CaseIterable {
case defence = "Def"
case midfield = "Mid"
case attack = "Att"
}
struct DataPoint:Identifiable {
var id = UUID()
var entrys:[RayEntry]
var color:Color
init (defence:Double, midfield:Double, attack:Double, color:Color) {
self.entrys = [
RayEntry(rayCase: .defence, value: defence),
RayEntry(rayCase: .attack, value: attack),
RayEntry(rayCase: .midfield, value: midfield),
]
self.color = color
}
}
struct ContentView: View {
// 1 THIS IS WHERE STATE VARIABLES ARE DECLARED
#State var team1Defence: Double = Double.random(in: 1.0...9.9)
#State var team1Midfield: Double = Double.random(in: 1.0...9.9)
#State var team1Attack: Double = Double.random(in: 1.0...9.9)
#State var team2Defence: Double = Double.random(in: 1.0...9.9)
#State var team2Midfield: Double = Double.random(in: 1.0...9.9)
#State var team2Attack: Double = Double.random(in: 1.0...9.9)
#State var playMatchIsVisible: Bool = false
let mainRed = Color(red: 245/255, green: 39/255, blue: 85/255)
let highlightRed = Color(red: 245/255, green: 85/255, blue: 141/255)
let mainBlue = Color(red: 62/255, green: 219/255, blue: 208/255)
let highlightBlue = Color(red: 119/255, green: 237/255, blue: 194/255)
let dimensions = [
Ray(maxVal: 10, rayCase: .attack),
Ray(maxVal: 10, rayCase: .midfield),
Ray(maxVal: 10, rayCase: .defence),
]
// 2 THIS IS THE DATA ARRAY WHERE I CANT GET STATE VARIABLES TO WORK, THE SAME 6 DECLARED VARIABLES NEED TO POPULATE THIS ARRAY
let data = [
DataPoint(defence: 5, midfield: 8, attack: 7, color: .red),
DataPoint(defence: 5, midfield: 2, attack: 9, color: .blue),
]
var body: some View {
//Background Z-Stack Container
ZStack {
LinearGradient(gradient: Gradient(colors: [(Color(red: 0.23529411764705882, green: 0.23529411764705882, blue: 0.32941176470588235)), (Color(red: 0.058823529411764705, green: 0.06666666666666667, blue: 0.12941176470588237))]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(/*#START_MENU_TOKEN#*/.all/*#END_MENU_TOKEN#*/)
//Main VStack
VStack {
//Row 1 Main HStack
HStack {
//Date / Fixture ZStack
ZStack {
Rectangle()
.frame(height: 70.0)
.foregroundColor(Color(red: 0.23921568627450981, green: 0.24313725490196078, blue: 0.3215686274509804))
.shadow(color: /*#START_MENU_TOKEN#*/.black/*#END_MENU_TOKEN#*/, radius: 4, x: 4, y: 4)
//Date Fixture HStack to ensure left alignment
HStack {
// Date / Fixture VStack to put text on top of each other (6)
VStack(alignment: .leading, spacing: 4.0) {
Text("Date")
.modifier(heavyFont())
Text("Saturday 23rd October")
.modifier(lightFont())
Text("League 2 Fixture")
.modifier(heavyFont())
}
Spacer() //Forces text to LHS of widget
}
.padding(.leading, 7)
}
.padding(.leading, 15)
.padding(.trailing, 6)
// Play Match Stack (7)
ZStack {
Rectangle()
.frame(height: 70.0)
.foregroundColor(Color(red: 0.23921568627450981, green: 0.24313725490196078, blue: 0.3215686274509804))
.shadow(color: /*#START_MENU_TOKEN#*/.black/*#END_MENU_TOKEN#*/, radius: 4, x: 4, y: 4)
// Play Match HStack to ensure correct left alignment (8)
HStack {
Button(action: {
self.playMatchIsVisible = true
}) {
Image("playFull")
Text("Play Match")
.modifier(heavyFont())
}
.alert(isPresented: $playMatchIsVisible, content: {
return Alert(title: Text("Are you sure you want to kick off?"), primaryButton: .default(Text("Yes, Let's play!")), secondaryButton: .default(Text("No, not yet.")))
})
}
}
.padding(.leading, 6)
.padding(.trailing, 15)
}
.padding(.top, 15)
//Row 2 HStack
HStack {
// 3 THIS IS WHERE STATE VARIABLES ARE CALLED TO POPULATE THE ABILITY BARS AND WORK IN THIS CONTEXT AND WHEEN PASSED AS BINDINGS INTERNALLY
teamWidget(defence: $team1Defence, midfield: $team1Midfield, attack: $team1Attack, color1: highlightRed, color2: mainRed, location: "Home", teamName: "Oxford United", position: "14")
.padding(.leading, 15)
.padding(.trailing, 6)
teamWidget(defence: $team2Defence, midfield: $team2Midfield, attack: $team2Attack, color1: highlightBlue, color2: mainBlue, location: "Away", teamName: "Luton Town", position: "3")
.padding(.leading, 6)
.padding(.trailing, 15)
}
.padding(.top, 15)
VStack {
RadarChartView(width: 370, MainColor: Color.init(white: 0.8), SubtleColor: Color.init(white: 0.6), quantity_incrementalDividers: 4, dimensions: dimensions, data: data)
}
.frame(height: 275)
.padding(.top, 15)
Spacer() //Forces all to top in main stack
HStack {
Button(action: {}) {
Image("home")
}
Spacer()
Button(action: {}) {
Image("barcode")
}
Spacer()
Button(action: {}) {
Image("squad")
}
Spacer()
Button(action: {}) {
Image("fixtures")
}
Spacer()
Button(action: {}) {
Image("settings")
}
}
.padding(.leading, 20)
.padding(.trailing, 20)
.padding(.bottom, 15)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The net result of this looks something like this... but currently the ability bars and radar charts dont have the same single truth data set.
content view screen shot