SwiftUIでToDoリストを作ろー! 3
ToDoリストなので新しく追加、そして編集できるようにしていきます。
List{}に引き続きモディファイアを追加して行こます。
leadingとtrailingの繋ぎ目に","を忘れずに!
これで、上部左側に EditButton()で編集ボタン(Edit)を作り、trailing: NavigationLinkで上部右側に追加ボタン(Add)を作ります。destination:でAdd Textと書かれた別画面へ遷移することができるようになります。
このままでは文字だけの画面が遷移画面として表示されます。新しい画面を作ってその画面へ遷移するようにします。
簡単なView(AddViewという名前にします)を作ります。これも"Hello"という文字のみの画面となります。
import SwiftUI
struct AddView: View {
var body: some View {
Text("Hello")
}
}
そして
としてやると"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())
)
}
}
}
この中の
"Add"ボタンを押すことで新しい画面、入力画面AddView()に遷移します。
この記事が気に入ったらサポートをしてみませんか?