見出し画像

SwiftUIでいこう! - Toolbar( .keyboard )


placementに.keyboardを指定するだけです。

struct ContentView: View {
    @State private var name = "Taylor Swift"
    @FocusState var isInputActive: Bool

    var body: some View {
        NavigationView {
            TextField("Enter your name", text: $name)
                .textFieldStyle(.roundedBorder)
                .focused($isInputActive)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()

                        Button("Done") {
                            isInputActive = false
                        }
                    }
                }
        }
    }
}

"Done"を押せばキーボードが下がります。

仕組みは変数宣言。

  @FocusState var isInputActive: Bool

iOS15/macOS12 で、FocusState が導入され、TextField 等の表示要素のフォーカス制御が可能となります。

変数に状態を記憶させます。

  .focused($isInputActive)

ボタンで状態を変化させます。

 Button("Done") {
       isInputActive = false
  }

ボタン押せば isInputActiveがfalseとなって下へ引っ込みます。


この記事が気に入ったらサポートをしてみませんか?