【SwiftUI】プロパティの値の変更を検知する方法!onChange
この記事からわかること
- SwiftUIのTextFieldの値の変更を検知する方法
- プロパティの変更を観測するには?
- onChangeメソッドの使い方
- 入力された値が数値かどうかを識別する方法
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
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学習に使用した参考書
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。