SwiftUIで簡単にリストを実装することができるようになったListビューを使って、今回はボタンを押した時に入力した値をリストへ追加する例を、サンプルコードを交えて紹介する。

実装手順

まず、リストに保持する値を格納する配列と、入力した値を受け取る変数を定義しておく。

struct ContentView: View {
    @State var mfgs:[String] = []
    @State var new = ""
    
    var body: some View {

    }
}

次に入力を受け付けるフィールドと、値の追加ボタンを実装していく。

ここではTextFieldビューを使って入力された値をnew変数にバインドさせ、Buttonビューがタップされた時にmfgs配列に値を追加する処理をおこなっている。

struct ContentView: View {
    @State var mfgs:[String] = []
    @State var new = ""
    
    var body: some View {
        VStack {
            HStack {
                TextField("Input here", text: $new)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button(action: {
                    self.mfgs.append(self.new)
                    self.new = ""
                }) {
                    Text("Add")
                }
            }
        }.padding()
    }
}

最後に、追加された値を表示するListビューを実装する。

struct ContentView: View {
    @State var mfgs:[String] = []
    @State var new = ""
    
    var body: some View {
        VStack {
            HStack {
                TextField("Input here", text: $new)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button(action: {
                    self.mfgs.append(self.new)
                    self.new = ""
                }) {
                    Text("Add")
                }
            }
            
            List {
                ForEach(mfgs, id: \.self) { user in
                    Text(user)
                }
            }
        }.padding()
    }
}

Listビューでは、入力した値を格納した配列に対しForEachを使って出力する処理をおこなっている。

実際に動作させてみると以下のようなUIが表示され、テキストフィールドに値を入力した後「Add」ボタンを押すと、下のリストに値が追加されていく。

たったこれだけのコード量で、このようなUIが作れるようになったSwiftUIには感謝しかない。