[SwiftUI]次のTextField(テキストフィールド)に移動する(move to next)には？

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

あるTextFieldから次のTextFieldに移動する方法を紹介します。

方法
使用例

方法

次のTextFieldに移動するには、FocusStaeとfocused修飾子を使います。

まず、TextFieldを判別するための列挙体を用意します。

enum FocusField {
    case name
    case email
    case password
}

次に、列挙体が型のFocusStateの変数を用意します。

@FocusState var focusField : FocusField?

そして、移動するTextFieldにfocused修飾子を付与します。

focused修飾子の第１引数にはFocusStateのバインド、引数「equals」には列挙体のTextFieldに対応する値を指定します。

TextField("Name", text: $name)
    .focused($focusField, equals: .name)

あとは、移動するする際に、 FocusStateの変数の値を移動先のTextFieldの値にします。

self.focusField = .name

FocusStateとfocused修飾子を使うことで、あるTextFieldから次のTextFieldに移動することが出来ます。

使用例

enum FocusField {
    case name
    case email
    case password
}

struct ContentView: View {
    
    @State var name = ""
    @State var email = ""
    @State var password = ""
    
    @FocusState var focusField : FocusField?
    
    var body: some View {
        VStack {
            TextField("Name", text: $name)
                .padding()
                .textFieldStyle(.roundedBorder)
                .focused($focusField, equals: .name)
                .onSubmit {
                    self.focusField = .email
                }
            
            TextField("email", text: $name)
                .padding()
                .textFieldStyle(.roundedBorder)
                .focused($focusField, equals: .email)
                .onSubmit {
                    self.focusField = .password
                }
            
            TextField("password", text: $name)
                .padding()
                .textFieldStyle(.roundedBorder)
                .focused($focusField, equals: .password)
        }
    }
}