【swiftUI】@Stateによる切り替えが、文字全てに適用されてしまう

Question

前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

緑の盤面をタップするたびに、黒色、白色の●が交互に表示されるようにしたい

→テキストデータの.foregroundColorを、.onTapGestureで@State（isPlaying）を切り替えることで変更しようとしました。

• ▲▲機能を動作するようにする

発生している問題・エラーメッセージ

タップするたびに●は表示されるのですが、全て同じ色になってしまいます。

該当のソースコード

import SwiftUI

struct Home: View {
    
    @State var moves: [String] = Array(repeating: "", count: 64)
    @State var isplaying = false
    
    var body: some View {
        
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 1), count: 8),spacing: 3) {
            
            ForEach(0..<64, id: \.self) { index in
                
                ZStack {
                    Color.green
                    
                    Text(moves[index])
                        .font(.system(size: 37))
                        .fontWeight(.heavy)
                        .foregroundColor(isplaying ? .white : .black)
                }
                .frame(width: getWidth(), height: getWidth())
                .onTapGesture {
                    withAnimation(Animation.easeIn(duration: 0.5)) {
                        if moves[index] == "" {
                            moves[index] = "●"
                        }
                        isplaying.toggle()
                    }
                }
            }
        }
    }
    
    func getWidth() -> CGFloat {
        let width = UIScreen.main.bounds.width - (15)
        return width / 8
    }
}

テキストの丸ではなく、白丸と黒丸のイメージ画像を用意して、
切り替えを行おうと思ったのですが、その場合どのようにして、タップする度に盤面の上に丸を表示させられるかがわからず、行き詰まっておりました。

質問に不備不足があった場合、申し訳ありません。
質問のアドバイス、直すべきところ、そもそも別の方法等がいい等もありましたら、
教えていただけると大変助かります。

恐れ入りますが、よろしくお願いします。

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

Xcode Version 14.0.1

Answer 1

→テキストデータの.foregroundColorを、.onTapGestureで@State（isPlaying）を切り替えることで変更しようとしました。

isPlayingはそのタップの時においた丸の色ですね。
それ以前においた丸の色は別の場所にそれぞれ保持する必要がありそうですね。
movesに保持するのが良いのかなと思いましたので、そのイメージで修正してみました。

テキストの丸ではなく、白丸と黒丸のイメージ画像を用意して、
切り替えを行おうと思ったのですが、その場合どのようにして、タップする度に盤面の上に丸を表示させられるかがわからず、行き詰まっておりました。

Imageを使った形に修正してみました。

import SwiftUI

struct Home: View {
    @State private var moves = Array(repeating: "", count: 64)
    @State var isplaying = true
    var body: some View {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 1), count: 8), spacing: 3) {
            ForEach(moves.indices, id: \.self) { index in
                ZStack {
                    Color.green
                    if !moves[index].isEmpty {
                        Image(systemName: moves[index])
                    }
                }
                .frame(width: getWidth(), height: getWidth())
                .onTapGesture {
                    withAnimation(Animation.easeIn(duration: 0.5)) {
                        guard moves[index].isEmpty else {
                            return
                        }
                        moves[index] = isplaying ? "circle.fill" : "circle"
                        isplaying.toggle()
                    }
                }
            }
        }
    }
    func getWidth() -> CGFloat {
        let width = UIScreen.main.bounds.width - (15)
        return width / 8
    }
}

Comments

[TOM]

ご返答いただきありがとうございます！
黒色と白色が交互に出るようになりました！
1点おうかがいしたいのですが、以下ZStack直下にある、 if !moves[index].isEmpty { }にはどのような意味があるのでしょうか？
この部分を削除しても黒色、白色が交互にでるのですが、動作がとても遅くなってしまいました。
恐れ入りますが、もしご存じでしたらお教えいただけますでしょうか？

ZStack {
Color.green
if !moves[index].isEmpty {
Image(systemName: moves[index])
}
}

[退会済みユーザー]

コメントありがとうございます。

> 以下ZStack直下にある、 if !moves[index].isEmpty { }にはどのような意味があるのでしょうか？

画像の名前が入っている時だけImageを表示するためのものですね。
画像の名前には"circle.fill"(黒丸)か"circle"(白丸)が入ることになりますが、
初期値は""(空文字列)ですので、空文字列の場合はImageを表示しないようにしています。

削除すると次のようなエラーが出力されると思います。
No symbol named '' found in system symbol set
＊画像が見つからなくて、探して遅くなっているのでしょうかね・・？
＊あるいはアニメーションされなくなっているみたいですので、それが遅いと感じているだけなのかもしれませんね

[TOM]

丁寧にご説明いただきありがとうございます！
勉強になりました！！