• 2022/9/5
• 3分

【SwiftUI】プロパティの値の変更を検知する方法！onChange

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

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

posted withアプリーチ

Swift UIではプロパティの値の変更を検知し、その度に処理を実行できるonChangeメソッドが用意されています。

今回はTextField構造体を使った使用例を見ながら使い方を見ていきたいと思います。

TextFieldの値の変更を検知する

TextField構造は引数に変数をバインディングすることで入力された値をリアルタイムにプロパティから取得できる便利なビュー構造の1つです。

struct ContentView: View {
    @State  var text:String = ""
    
    var body: some View {
        TextField("テキスト", text: $text)
            .onChange(of: text) { [text] newText in
                print(newText) // 何らかの処理
            }
    }
}

TextFieldに値を入力される度(=プロパティの値が変わる度)に処理を実行させるにはonChangeメソッドを使用します。

onChangeメソッドとは？

onChangeメソッドTextFieldなどのビュー構造体の大元であるViewプロトコルが持つライフサイクル関連のメソッドの1つです。

ライフサイクル関連のメソッドの中にはviewが表示される際に実行されるonAppearやviewが消えた際に実行させるonDisappearなどが用意されています。

その中でもonChangeメソッドは引数に指定したプロパティの値の変更を検知し、変化する度に処理を実行するメソッドです。

使い方

定義

func onChange<V>(
    of value: V,
    perform action: @escaping (V) -> Void
) -> some View where V : Equatable

使用方法は引数ofに観測したいプロパティを、引数perform actionには実行したい処理をクロージャとして渡します。「Trailing Closure記法」が使用できるので省略した形で記述可能です。

.onChange(of: プロパティ) { [oldValue] newValue in
}

引数perform actionのクロージャの引数では変更前の古い値と変更された新しい値の2つを受け取り参照できます。

入力値が数値か識別する

例として「入力値が数値かどうかを識別するプログラム」を作ってみます。keyboardType(.numberPad)を指定しているので通常は数値しか入力できませんが、シミュレーターでは文字列が入力できるので試してみてください。

struct ContentView: View {
    @State  var text:String = ""
    @State  var isNum:Bool = true
    
    func checkNum(_ textNum:String) -> Bool{
        if text != ""  {
            guard Int(text) != nil else{
                return false
            }
            return true
        }
        return false
    }
    
    var body: some View {
        TextField("テキスト", text: $text)
            .foregroundColor((isNum ? .black : .red))
            .keyboardType(.numberPad)
            .onChange(of: text) { newText in
                isNum = checkNum(newText)
            }
    }
}

入力された値は数値に変換できない場合はフラグをONにしてTextField内の文字色を赤色に変更しています。

複数の入力値を検知する

onChangeで検知する値は複数指定することも可能です。その際はofの引数に配列形式で変数を渡します。

VStack{
  TextField("テキスト1", text: $text1)
  TextField("テキスト2", text: $text2)
}.onChange(of:[text1,text2]){newValue in
    print(newValue)
}
// ["au", "k"]
// [“ai”, "ka"]
// [“aiu”, "ka"]
// [“aiu", "kak"]

複数指定している場合、1つでも変化した場合に呼び出され処理が実行されます。引数で受け取れる値も同様に配列形式になるので注意してください。

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

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

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

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

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