custom coloring with if else in swiftui? - swift

Question

I am making an earthquake application on SwiftUI. The data I receive includes the magnitude of the earthquake and I want the text I print on the screen to change color according to this magnitude.
For example, I can say: I want it to show green if it is less than 3, yellow if it is between 3 and 5, red if it is between 5 and 7, black if it is greater than 7.
Can you help me?
Thanks

Answer 1

There are many ways to solve this problem, I believe if you know how to do an if-else statement, you can do it yourself. Since you're struggling with probably swift or swiftUI itself
here are 3 ways ways you can do it
first is
struct ContentView: View {
#State var quake = 2
var body: some View {
if (quake < 3) {
Text("Earthquake")
.foregroundColor(.green)
} else if (quake <= 5) {
Text("Earthquake")
.foregroundColor(.yellow)
} else if // etc...
}
}
but it's very inefficient, therefore the 2nd solution is to iterate it within the foreground color itself
struct ContentView: View {
#State var quake = 2
var body: some View {
Text("Earthquake")
.foregroundColor(quake < 3 ? .green : quake <= 5 ? .yellow : // etc)
}
}
all you have to do is put the
condiditon ? if its true : if codition ? if it's true : if condition //etc untill else
it's basicaly like
if condition then do something
else if condition
up untill
else
the last solution is to create a function that returns the key, i believe this one is far more beginner-friendly compared to the 2nd one
struct ContentView: View {
#State var quake = 2
private func getColor() -> Color {
if quake <= 3 {
return .green
} else if quake <= 5 {
return .yellow
}
return .black // default, random, you decide the last condition
}
var body: some View {
Text("Earthquake")
.foregroundColor(self.getColor())
}
}

Answer 2

You can use ternary operators to show green if it is less than 3, yellow if it is between 3 and 5, red if it is between 5 and 7, black if it is greater than 7. For example:
struct ContentView: View {
#State var quake = 2
var body: some View {
Text("quake in 🇺🇦")
.foregroundColor(quake < 3 ? .green
: quake <= 5 ? .yellow
: quake <= 7 ? .red
: .black)
}
}