[SwiftUI]TextField(テキストフィールド)のフォーカス(focus)を移動する(move)には？

どうも、ちょげ(@chogetarou)です。

TextFieldのフォーカスを移動する方法を紹介します。

方法
使用例

方法

TextFieldのフォーカスを移動するには、FocusStateとfocusedモディファイアを使います。

まず、FocusStateの変数を用意します。

@FocusState private var focusState

次に、TextFieldにfocusedモディファイアを付与します。

そして、focusedモディファイアの第１引数に用意した変数のバインド、第２引数「equals」にフォーカスを当てる際の値を指定します。

ここまでで、FocusStateの変数の値がfocusedの引数「equals」の値と一緒になった際に、TextFieldにフォーカスが移動するようになります。

TextField("", text: $editingText)
    //focusStateの値がvalueになったときにフォーカスされる
    .focused($focusState, equals: value)

最後に、Buttonなどの処理で、FocusStateの変数を操作します。

Button("") {
    //FocusStateの変数の値の操作
}

使用例

以下は、使用例です。

struct ContentView: View {
    enum FocusField {
        case name
        case age
        case emailAddress
    }
    
    @State var name = ""
    @State var age = ""
    @State var emailAddress = ""

    @FocusState private var focusState : FocusField?
    
    var body: some View {
        VStack (spacing: 30){
            VStack {
                TextField("Your name", text: $name)
                    .focused($focusState, equals: .name)
                    .padding()
                Button("Focus Name") {
                    focusState = .name
                }
            }
            VStack {
                TextField("Your age", text: $age)
                    .focused($focusState, equals: .age)
                    .padding()
                Button("Focus age") {
                    focusState = .age
                }
            }
            VStack {
                TextField("Your emailAddress", text: $emailAddress)
                    .focused($focusState, equals: .emailAddress)
                    .padding()
                Button("Focus emailAddress") {
                    focusState = .emailAddress
                }
            }
            
        }
    }
    
}