CircleImage keeps changing colour after selecting an option in picker and adding to list - swift

Question

I'm having this weird issue where the colour for an item in a list changes when a new item with a different colour is added, essentially it doesn't retain its colour-value but takes up a new one.
What I'm trying to do is to show a colour that corresponds to the priority level the user has selected.
Here is the code:
struct PriorityGreen: View {
var body: some View {
Circle()
.frame(width: 20, height: 20)
.foregroundColor(Color.green)
}
}
struct PriorityYellow: View {
var body: some View {
Circle()
.frame(width: 20, height: 20)
.foregroundColor(Color.yellow)
}
}
struct PriorityOrange: View {
var body: some View {
Circle()
.frame(width: 20, height: 20)
.foregroundColor(Color.orange)
}
}
struct PriorityRed: View {
var body: some View {
Circle()
.frame(width: 20, height: 20)
.foregroundColor(Color.red)
}
}
Code for view
import SwiftUI
struct AppView: View {
#ObservedObject var data = Model()
#State var showViewTwo = false
var body: some View {
NavigationView {
VStack {
List {
ForEach(data.arrayOfTask, id: \.self) { row in
HStack {
if self.data.priority == 0 {
PriorityGreen()
} else if self.data.priority == 1 {
PriorityYellow()
} else if self.data.priority == 2 {
PriorityOrange()
} else if self.data.priority == 3 {
PriorityRed()
}
Text("\(row)")
}
}
.onDelete(perform: removeItems).animation(.default)
}
.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)
}
.navigationBarTitle("Tasks")
.navigationBarItems(leading:
EditButton().animation(.default),
trailing: Button(action: {
self.showViewTwo.toggle()
}) {
Text("New task")
}.sheet(isPresented: $showViewTwo) {
ViewTwo(data: self.data, showViewTwo: self.$showViewTwo)
})
}
}
func removeItems(at offset: IndexSet) {
data.arrayOfTask.remove(atOffsets: offset)
}
}
struct AppView_Previews: PreviewProvider {
static var previews: some View {
AppView()
}
}
struct ViewTwo: View {
#State var data: Model
#State var newName = ""
#State var newCatergory = ""
#State var newPriorityLevel = ""
#State var defaultPriorityLevel = 1
#State var priorityTypes = ["low", "medium", "high", "critical"]
#Binding var showViewTwo: Bool
var body: some View {
NavigationView {
Form {
Section(header: Text("Add task name")) {
TextField("Name", text: $newName)
/*
This section will be implementated later on
TextField("Catergory", text: $newCatergory)
*/
}
Section(header: Text("Select task priority")) {
Picker("Priority Levels", selection: $defaultPriorityLevel) {
ForEach(0..<priorityTypes.count) {
Text(self.priorityTypes[$0])
}
}
.pickerStyle(SegmentedPickerStyle())
}
}
.navigationBarTitle("New task details")
.navigationBarItems(trailing:
Button("Save") {
self.showViewTwo.toggle()
self.data.taskName = self.newName
self.data.arrayOfTask.append(self.newName)
self.data.priority = self.defaultPriorityLevel
})
}
}
}
struct PriorityCirleView: View {
var body: some View {
Circle()
.frame(width: 20, height: 20)
.foregroundColor(Color.green)
}
}
import SwiftUI
enum Catergory {
case work
case home
case family
case health
case bills
}
enum Priority {
case low
case medium
case high
case critical
}
class Model: ObservableObject {
#Published var taskName = ""
#Published var taskCategory = ""
#Published var priority = 0
#Published var arrayOfTask = [String]()
}
This gif demonstrates the problem more clearly
(Gif)[https://imgur.com/a/ffzpSft]

Answer 1

You only have one priority in your model instead of a priority per task.
Change your model to this:
class Model: ObservableObject {
struct Task {
var taskName = ""
var taskCategory = ""
var priority = 0
}
#Published var arrayOfTask = [Task]()
}
And update your code to use the new model:
struct AppView: View {
#ObservedObject var data = Model()
#State var showViewTwo = false
var body: some View {
NavigationView {
VStack {
List {
ForEach(data.arrayOfTask, id: \.taskName) { task in
HStack {
if task.priority == 0 {
PriorityGreen()
} else if task.priority == 1 {
PriorityYellow()
} else if task.priority == 2 {
PriorityOrange()
} else if task.priority == 3 {
PriorityRed()
}
Text("\(task.taskName)")
}
}
.onDelete(perform: removeItems).animation(.default)
}
.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)
}
.navigationBarTitle("Tasks")
.navigationBarItems(leading:
EditButton().animation(.default),
trailing: Button(action: {
self.showViewTwo.toggle()
}) {
Text("New task")
}.sheet(isPresented: $showViewTwo) {
ViewTwo(data: self.data, showViewTwo: self.$showViewTwo)
})
}
}
func removeItems(at offset: IndexSet) {
data.arrayOfTask.remove(atOffsets: offset)
}
}
struct ViewTwo: View {
#State var data: Model
#State var newName = ""
#State var newCatergory = ""
#State var newPriorityLevel = ""
#State var defaultPriorityLevel = 1
#State var priorityTypes = ["low", "medium", "high", "critical"]
#Binding var showViewTwo: Bool
var body: some View {
NavigationView {
Form {
Section(header: Text("Add task name")) {
TextField("Name", text: $newName)
/*
This section will be implementated later on
TextField("Catergory", text: $newCatergory)
*/
}
Section(header: Text("Select task priority")) {
Picker("Priority Levels", selection: $defaultPriorityLevel) {
ForEach(0..<priorityTypes.count) {
Text(self.priorityTypes[$0])
}
}
.pickerStyle(SegmentedPickerStyle())
}
}
.navigationBarTitle("New task details")
.navigationBarItems(trailing:
Button("Save") {
var task = Model.Task()
self.showViewTwo.toggle()
task.taskName = self.newName
task.priority = self.defaultPriorityLevel
self.data.arrayOfTask.append(task)
})
}
}
}
Using the taskName as the id is not a good idea. Update your Task struct to include a unique value:
class Model: ObservableObject {
struct Task: Identifiable {
static var uniqueID = 0
var taskName = ""
var taskCategory = ""
var priority = 0
var id = 0
init() {
Task.uniqueID += 1
self.id = Task.uniqueID
}
}
#Published var arrayOfTask = [Task]()
}
And then change:
ForEach(data.arrayOfTask, id: \.taskName) { task in
to
ForEach(data.arrayOfTask) { task in