【SwiftUI】ForEachを使ったViewがきちんと再描画されない

Question

実現したいこと

@StateとForEachを使ったViewの再描画をしたい

前提

SwiftUIで、ForEachを使ったViewで丸数字を指定の個数だけ並べて表示させたあと、個数を変化させて表示を再描画させたいのですが、うまくいきません。

例えば、あらかじめ@State var number = 4として表示させると、
個数の指定は４と表示され、意図通り数字が４個並びます。（①②③④）
ボタンで、１個数字を増やして５個にしようとすると、
個数の指定は５と再描画されるのに、数字の並びは４個のままです。（①②③④）
数字の並びも５個としたい（①②③④⑤）のですが、どうすればいいでしょうか？

個数指定の数字も、数字の並びも同じImageViewの中で記述しているので、ImageViewが@Stateの数字が変わったことで再描画されているはずなのですが...
どなたかご教示いただけるとありがたいです。

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

エラーメッセージはありません。

該当のソースコード

import SwiftUI

struct ContentView: View {
    @State var number = 4
    
    var body: some View {
        VStack {
            ImageView(number: number).padding()
            Button("個数 +1") { if number < 6 { number = number + 1 }}
           Button("個数 -1") { if number > 1 { number = number - 1 }}
        }
    }
}

struct ImageView: View {
    var number: Int
    
    var body: some View {
        VStack {
            Text("個数の指定: \(number)").padding()
            HStack {
                ForEach (0..<number) { i in
                    Image(systemName: "\(i+1).circle").font(.title)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

試したこと

UUID()をうまく使うと解決すると書いてあるものもありましたが、理解できませんでした。

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

Xcode 14.2

Answer 1

このコードは、
ForEach (0..<number) { i in
の行に
Non-constant range: argument must be an integer literal
という警告が表示されていて、アプリを起動してボタンをタップするたびに、コンソールに

ForEach<Range<Int>, Int, ModifiedContent<Image, _EnvironmentKeyWritingModifier<Optional<Font>>>> count (5) != its initial count (4). `ForEach(_:content:)` should only be used for *constant* data. Instead conform data to `Identifiable` or use `ForEach(_:id:content:)` and provide an explicit `id`!

というエラーメッセージが表示されるはずです。ボタンをタップしても表示個数が変わらない原因は、そのメッセージに記載されている通りです。ForEachに指定する配列や範囲に変数を使用する場合は、Identifiableに準拠した変数を指定するか、 id 引数で、何を識別要素とするかを指定する必要があります。よくわからない時は、上記のエラーメッセージをWebで検索すれば、どのようにすればよいか解説した記事が見つかると思います。今回の場合、

ForEach (0..<number, id: \.self) { i in

のようにして、 id: \.self の引数を追加すれば表示個数が変化するようになると思います。

Comments

[kuwatsy]

たいへんありがとうございました。
ご指摘のとおり、コードの横にいつもワーニングが表示されており、それを検索ワードにしてwebで関連する対処法を見てはいましたが、実際にどう自分のコードを変えるのか分からずにいました。
今回、具体的に変更箇所を示していただいた結果、あっという間にやりたいことが実現でき、鳥肌が立ったのと、改めて対処法の書いてあるwebを見直したところ、（今まで全く意味がわからなかった）書いてある内容が頭にどっと入ってくるようになりました。
説明もとても優しく、丁寧に解説いただき、嬉しい限りです。
本当にありがとうございました。