SwiftUIでToDoリストを作ろー！ 3

ToDoリストなので新しく追加、そして編集できるようにしていきます。

List{}に引き続きモディファイアを追加して行こます。

.navigationBarItems(
        leading: EditButton(),
        trailing: NavigationLink("Add", destination:Text("Add Text"))
)

leadingとtrailingの繋ぎ目に","を忘れずに！

これで、上部左側に EditButton()で編集ボタン(Edit)を作り、trailing: NavigationLinkで上部右側に追加ボタン(Add)を作ります。destination:でAdd Textと書かれた別画面へ遷移することができるようになります。

このままでは文字だけの画面が遷移画面として表示されます。新しい画面を作ってその画面へ遷移するようにします。

簡単なView(AddViewという名前にします)を作ります。これも"Hello"という文字のみの画面となります。

import SwiftUI

struct AddView: View {   
    var body: some View {    
        Text("Hello")    
    }  
}

そして

NavigationLink("Add", destination:addView())

としてやると"Add"ボタンを押すと新しく作った画面に遷移するようになります。

入力画面のAddView()を作り込んでいきます。入力欄を作ります。

2つの部品を作ります。

表示させる部分
まず入力を受ける変数

  @State var inputText:String = ""

入力部分

  TextField("入力してください", text: $inputText) 
                    .font(.title)
                    .background(Color.black)
                    .padding(.horizontal)
                    .cornerRadius(10)

ボタンを押せば保存できるようにする部分

 Button(action:{    
　　　　　　　// 保存するコードを書く予定   
 },label:{
             Text("Save")
 })

これを縦に並べるので

 VStack{
     TextField("入力してください", text: $inputText) 
                    .font(.title)
                    .background(Color.black)
                    .padding(.horizontal)
                    .cornerRadius(10)

     Button(action:{    
　　　　　　　// 保存するコードを書く予定   
     },label:{
             Text("Save")
     })

}

とします。

全体としては表示を上の方にしたいので ScrollView{}をつけています。

struct AddView: View {
    
    @State var inputText:String = ""
    
    var body: some View {
        ScrollView{
            VStack{
                TextField("入力してください", text: $inputText) 
                    .font(.title)
                    .background(Color.black)
                    .padding(.horizontal)
                    .cornerRadius(10)
                
                Button(action:{       
                },label:{
                    Text("Save")
                } )
            }
        }
        .navigationTitle("Add Word")                                     
   }
}

表示は

となります。

まとめです。現段階のContentViewのコード。

struct ContentView: View {
    
    @State var words = ["Hello","Good by"]
    
    var body: some View {
        
         NavigationStack{
            List{ 
                ForEach(words,id: \.self){ word in
                    ListRowView(greet: word) 
                }           
            } 
　　　　　　　　　 .navigationTitle("Todo List")
         　     .navigationBarItems(
                   leading: EditButton(),
                   trailing: NavigationLink("Add", destination:AddView())
                )
        }
   }    
}

この中の

.navigationBarItems(
　　leading: EditButton(),
　　trailing: NavigationLink("Add", destination:AddView())
)

"Add"ボタンを押すことで新しい画面、入力画面AddView()に遷移します。