SwiftUI: Custom Rating View For Each Image URL - swiftui

Question

I was wondering if someone can help me solve this problem. I have the following rating view:
import SwiftUI
struct RatingView: View {
#Binding var rating: Int
var label = ""
var maxRating = 5
var offImage: Image?
var onImage = Image(systemName: "star.fill")
var offColor = Color.gray
var onColor = Color.yellow
var body: some View {
HStack{
if label.isEmpty == false {
Text(label)
}
ForEach(1..<maxRating + 1, id: \.self){ number in
image(for: number)
.foregroundColor(number > rating ? offColor : onColor)
.onTapGesture {
rating = number
}
}
}
}
func image(for number: Int) -> Image {
if number > rating {
return offImage ?? onImage
} else {
return onImage
}
}
}
struct RatingView_Previews: PreviewProvider {
static var previews: some View {
RatingView(rating: .constant(4))
}
}
I wanted to have a custom rating for each image displayed in the ContenView, which is as follows:
import SwiftUI
struct ContentView: View {
var pictureURL = DbHelper().getPictures()
#EnvironmentObject var authenticator: Authenticator
#State private var rating: Int = 0
var body: some View {
List(pictureURL, id: \.self) { photo in
VStack{
if #available(iOS 15.0, *) {
AsyncImage(url: URL(string: photo), scale: 10.0)
} else {
// Fallback on earlier versions
}
RatingView(rating: $rating)
}
}
Button("Logout") {
authenticator.logout()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.environmentObject(Authenticator())
}
}
This code displays the view but when I click on a start, all of the ratings change to that value. I eventually want to add to a database, for specified user who is logged in, the rating, and image URL associated with that rating.
Any hints on how to go about this would be helpful.

Answer 1

Within your loop, all of your rating views bind to the same $rating state variable. So, if you have five images and ratings views for each, if you tap on the first one, that changes ContentView's rating value, and that change is then reflected in the other four.
To have individual ratings, you'll need some way of associating a rating with a picture URL. Depending on how you end up modelling your data, that could involve replacing pictureURL, an array of URL strings, with an array of objects, each of which contains the URL and a bindable rating that applies to that user.
There are other ways of structuring that data, depending on how your final model needs to be structured, but the key will always be that the rating you pass to your RatingView will need to apply to the current URL and no others.