Swiftでアプリ。- Todoリスト！ 2

入力欄とリスト表示ができるようになったので、次は入力欄に入力したものがリストに反映されるようにしていきます。

"TextField"で受け取ったデータですが、@Stateで宣言した変数に代入されるのでリアルタイムに更新することができます。

以下のコードで確かめることができます。プレビュー画面に入力して確かめると入力欄に文字を入れると同時に表示されます。(iPadまたはMacのSwiftPlaygraouds、もしくはXcode)

struct ContentView: View {
    
    @State var str = ""
    
    var body: some View {
        
        TextField("入力してください", text:$str)
        
        Text(str)
        
    }
}

この入力したデータをリストに追加していけば良いので、今宣言している

@State var todo = ""

変数todoを配列に追加してけば良いです。なのでデータを追加する配列の変数を宣言します。

@State var todoList = []

この配列にボタンを押すタイミングで追加します。ボタンのコードは

Button(action: {        
          self.todoList.append(todo)
          print(todoList)
          self.todo = ""    
}){
      　　 ZStack{
               RoundedRectangle(cornerRadius: 5)
                 .frame(width: 50,height: 30)
               Text("add")
                 .foregroundColor(.white)
           }
}

ボタンを押したらtodoListに追加します。

　　self.todoList.append(todo)

そして、変数todoのデータを消します。

self.todo = ""

配列todoListのデータをList()に反映させれば入力したデータがリストで一覧表示されることになります。

配列のデータを使ってList表示させる方法

配列のデータをList()に反映させる方法を確認しておきます。まず配列を以下のように定義しておき

@State var fuluts = ["apple","orange","Banana"]

List()で表示されるようにします。

List(配列の変数名 , id: \.self){ 配列1つを取り出す変数名 in
       Text(配列1つを取り出す変数名)

List(fuluts,id: \.self){flutsName in
　　Text(flutsName)
}

全体は

struct ContentView: View {
    
    @State var fuluts = ["apple","orange","Banana"]
    
    var body: some View {
        
        List(fuluts,id: \.self){flutsName in
            Text(flutsName)
        }
        
    }
}

となります。表示すると

それでは、Todoリストでの配列データを使ったリスト表示をしてみます。

List( todoList,id:\.self){todoData in
     
      Text(todoData)
                
 }

これでプレビューして入力してボタンを押してみると

これで入力したものがリスト表示されているのが確認できました。