SwiftUIでアプリ。- リストに追加してみよう

リストの表示を中心にサンプル実行してきました。次に自分の入力したものをリストに追加して表示させてみましょう。

必要な変数。

@State var messages: [String] = []　　・・・　リストの内容を入れます。
@State var newMessage = ""　・・・　入力するデータを入れます。

データを入力する部分を作ります。HStackで横並びにします。

       HStack {
             TextField("メッセージを入力", text: $newMessage)
                   .textFieldStyle(RoundedBorderTextFieldStyle())
             Button(action: {
                    self.messages.append(self.newMessage)
                    self.newMessage = ""
              }) {
                    Text("追加")
                        .buttonStyle(BorderlessButtonStyle())
                  }
      　 }

こんな感じで横向きに入力欄と追加ボタンを作ります。

構成要素は以下の2つ。

TextField()　・・・　入力欄
Button()　・・・　追加ボタン

あとはこれら入力した値をリストに反映させるコードです。List{}を使います。

 List {
    ForEach(messages, id: \.self) { user in
         Text(user)
     }.onDelete { offsets in
          self.messages.remove(atOffsets: offsets)
                  }
 }.toolbar {
     EditButton()
　　}

ForEachで連続で配列のデータ、変数messagesに入った値を"user"に一つずつ入れて Text(user)で表示させます。

.onDelete { offsets in
          self.messages.remove(atOffsets: offsets)
                  }

で削除できるようにしています。

.toolbar {
     EditButton()
}

EditButton()では右上部にEditボタンを表示します。これを押すと削除ができます。

全コードです。

import SwiftUI


struct ContentView: View {

    @State var messages: [String] = []
    @State var newMessage = ""
    
    var body: some View {
        
        NavigationStack{
           
                VStack{
                    HStack {
                        TextField("メッセージを入力", text: $newMessage)
                            .textFieldStyle(RoundedBorderTextFieldStyle())
                        Button(action: {
                            self.messages.append(self.newMessage)
                            self.newMessage = ""
                        }) {
                            Text("追加")
                                .buttonStyle(BorderlessButtonStyle())
                        }
                    }
                .padding()
                
                List {
                    ForEach(messages, id: \.self) { user in
                        Text(user)
                    }.onDelete { offsets in
                        self.messages.remove(atOffsets: offsets)
                    }
                }.toolbar {
                    EditButton()
                }
            }   
            
        }

    }
}

表示させると

Editボタンを押すと

となって削除できるようになります。