• 2022/9/1
• 3分

【SwiftUI】TextFieldをボタンを押すたびに増やす方法！配列でバインディング

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIでボタンを押す度にTextFieldを増やす機能を実装する方法をまとめました。

TextFieldをボタンを押すたびに増やす

ボタンを押すたびにTextFieldを増やすには以下のポイントが重要です。

• TextFieldにバインディングする変数は配列形式
• 配列には空の要素を入れておく
• ボタンを押されるたびに空の要素を増やす
• ForEachで配列個数分繰り返しTextFieldを表示

TextField構造体を用いる場合は入力値を保持するための変数を用意しなければいけません。ボタンを増やすたびにTextFieldが増えていく場合は変数を用意する数もフレキシブルである必要があります。なので配列の中の要素と紐付くようにしていきます。

struct ContentView: View {
    @State  var memberArray:[String] = [""]
    var body: some View {
        HStack{
            Button(action: {
                memberArray.append("")
            }, label: {
                Image(systemName: "person.fill.badge.plus")
            }).foregroundColor(.blue).padding(5)
            
            Button(action: {
                memberArray.removeLast()
            }, label: {
                Image(systemName: "person.fill.badge.minus")
            }).foregroundColor(memberArray.count == 1  ? .gray : .red).padding(5).disabled(memberArray.count == 1)
        }
        ForEach(memberArray.indices, id: \.self) { i in
            TextField("メンバー\(i + 1)", text: $memberArray[i]).frame(width: 200).padding(5)
        }
    }
}

TextFieldの追加はバインディングしている配列内の要素の追加で実装できます。ここではボタンを押されるたびに空の要素をappendメソッドで追加しています。

memberArray.append("")

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書