SwiftUI - よくある星の評価機能を実装したい

前提・実現したいこと

評価機能を盛り込みたいため星をタップしたらタップされた星（評価）以下を塗りつぶしの星に変更したい

実現したい動作は、左から星1,星2,星3とし、
星1をタップしたら、★☆☆
星2をタップしたら、★★☆
星3をタップしたら、★★★

現状以下のコードだとタップした星のみが反応して★となる。
ループでviewを生成したときのviewの操作方法を理解しておらず、調べてもなかなか出てこないため、ご教授いただきたいです。

該当のソースコード

ForEach(0..<3) { _ in
   StarView()
}

struct StarView: View {
    @State var isChecked:Bool = false
    var body: some View {
        Button(action: {
            isChecked.toggle()
        }){
            HStack{
                Image(systemName: isChecked ? "star.fill": "star")
                    .foregroundColor(.yellow)
            }
        }
    }
}

補足情報（FW/ツールのバージョンなど）

Xcode, SwiftUI

行動規範の内容に同意します

回答1件

ベストアンサー

それだと一つ一つの StarView が独立してオン・オフできるようになってしまいます。
星の数を選べるようにするには、次のようにボタンを 3 つ並べた View を作ると良いでしょう。

swift
1struct StarsView: View {
2    @State var stars = 0
3
4    var body: some View {
5        HStack {
6            ForEach(0..<3) { index in
7                Button(action: {
8                    stars = index + 1
9                }) {
10                    Image(systemName: index < stars ? "star.fill": "star")
11                        .foregroundColor(.yellow)
12                }
13            }
14        }
15    }
16}