SwiftUI 配列に追加した文字列をリスト表示する方法を教えてください

Question

前提

SwiftUIで、配列にデータを追加しながらリアルタイムでリストが増えていく機能を実装したいのですが上手くいきません。

実現したいこと

TextFieldに文字を入力するとtextlist:[String]に格納され、リストが増えていく機能を実装したいです。
また、自分は配列に格納していく方法しか思いつきませんでしたが、他にこのような機能を実現する方法があったら教えていただきたいです。
Realm、firebaseは現在勉強中です。

該当のソースコード

import SwiftUI

struct DataList: View {
    @State var textlist:[String]=[]
    @State var text=""
    var body: some View {
        VStack{
            TextField("ここに入力", text: $text)
            Button(action:{
                textlist.append(text)
            }) {
                Text("保存")
            }
        List {
            ForEach(0..<textlist.count){index in
                Text(textlist[index])
            }
        }
        }
    }
}

Answer 1

Section 5 Make the List Dynamic
https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

idを指定すると良いと思いました。

ForEach(0..<textlist.count, id: \.self){index in
    Text(textlist[index])
}

追記です。

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

これはなぜか説明していただければ幸いです。

Creates an instance that uniquely identifies and creates views across updates based on the provided key path to the underlying data’s identifier.
(機械翻訳)基礎となるデータの識別子への提供されたキーパスに基づいて、更新にわたってビューを一意に識別して作成するインスタンスを作成します。

https://developer.apple.com/documentation/swiftui/foreach/init(_🆔content:)-82hm4

SwiftUIの内部実装まで把握していないので合っているかわからないですが・・
リストを動的に追加したり、削除したりするのに、SwiftUIが要素を一意に識別できるようにしてあげる必要があるみたいです。
そのための情報がidみたいです。

例えば、下のサンプルコードはidが一意ではないので、
([1, 2, 1, 2, 1]なので1が3つあるし、2が2つある)
4番目の要素をスワイプして削除すると、
2番目の2と3番目の1が入れ替わって？
[1, 1, 2, 1]
の順番で表示されます。

要素を一意に識別できないとこのような不都合があるので、
SwiftUIに要素を一意に識別できるための情報(id)を渡してあげる必要があるみたいです。

＊idを渡さないとSwiftUIは何も識別できないことになると思います
＊selfは要素自身ですので、サンプルコードの場合ですと、「1」とか「2」とかの値になります

import SwiftUI

struct ContentView: View {
    @State var array: [Int] = [1, 2, 1, 2, 1]
    var body: some View {
        List {
            ForEach(array, id: \.self) { int in
                Text("\(int)")
            }
            .onDelete(perform: perform)
        }
    }
    func perform(ind: IndexSet) {
        array.remove(atOffsets: ind)
        print(array)
    }
}

---

It’s important that the id of a data element doesn’t change, unless SwiftUI considers the data element to have been replaced with a new data element that has a new identity. If the id of a data element changes, then the content view generated from that data element will lose any current state and animations.
(機械翻訳)SwiftUI がデータ要素を新しい ID を持つ新しいデータ要素に置き換えたと考えない限り、データ要素の ID が変更されないことは重要です。データ要素のIDが変更された場合、そのデータ要素から生成されたコンテンツビューは、現在の状態とアニメーションを失います。

https://developer.apple.com/documentation/swiftui/foreach/init(_🆔content:)-82hm4

機械翻訳で表現は微妙ですし、
今回とはちょっと異なるケースかもしれませんが、
「現在の状態とアニメーションを失います。」
と記載されています。
idを渡してあげないと内部の配列に対して要素を追加・削除しても、画面にその内容が反映されないということだと思います。

---

SwiftUIのチュートリアルも実践してみるとより理解が深まると思うのですが、
idをForEachに直接記述する以外にも、データにidプロパティを持たせることもできるみたいです。
https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

Comments

[FirstBeginner]

解決しました！
これはなぜか説明していただければ幸いです。

[FirstBeginner]

なるほど！ありがとうございます！