SwiftUIで自動的にキーボードを表示する

SwiftUIで、TextFieldTextEditorなど、編集可能なビューがある画面を表示する際に、自動的にキーボードを表示してすぐに入力できるようにする方法を調べたので、この記事にまとめました。

目次

フォーカス状態を設定・取得する

TextFieldTextEditorのフォーカス状態を設定および取得するには、@FocusStateというプロパティラッパーとfocusedモディファイアを使用します。

以下のコードではisFocusedプロパティにTextFieldのフォーカス状態が代入されます。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    @FocusState private var isFocused: Bool
    
    var body: some View {
        TextField("", text: $text)
            .padding()
            .textFieldStyle(.roundedBorder)
            .focused($isFocused)
    }
}

ビュー表示時にフォーカス状態を設定する

isFocusedプロパティはフォーカス状態の取得だけでなく、フォーカス状態の変更も可能です。キーボードはフォーカス状態のときに表示されます。画面が表示される際にisFocusedプロパティをtrueに設定することで、画面表示と同時に自動的にキーボードを表示させることができます。

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    @FocusState private var isFocused: Bool
    
    var body: some View {
        TextField("", text: $text)
            .padding()
            .textFieldStyle(.roundedBorder)
            .focused($isFocused)
            .onAppear() {
                DispatchQueue.main.async {
                    isFocused = true
                }
            }
    }
}

Dispatchで遅延させる

onAppearの中で直接isFocusedプロパティにtrueを設定すると、キーボードが表示された際に反応しないことがありました。おそらくビューの構築処理中にフォーカスが変更され、キーボードの表示によって再構築が必要になるためだと思われます。

そのため、DispatchQueueasyncメソッドを使用してビューの構築処理の外でプロパティを設定するようにしています。

実行

このコードを実行すると、ContentViewが表示される際にキーボードが自動的に表示されます。

著書紹介

Authored Books

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Akira Hayashi (林 晃)のアバター Akira Hayashi (林 晃) Representative(代表), Software Engineer(ソフトウェアエンジニア)

アールケー開発代表。Appleプラットフォーム向けの開発を専門としているソフトウェアエンジニア。ソフトウェアの受託開発、技術書執筆、技術指導・セミナー講師。note, Medium, LinkedIn
-
Representative of RK Kaihatsu. Software Engineer Specializing in Development for the Apple Platform. Specializing in contract software development, technical writing, and serving as a tech workshop lecturer. note, Medium, LinkedIn

目次