[SwiftUI]TextField(テキストフィールド)のキーボード(keyboard)にツールバー(toolbar)を追加する(add)には？

[SwiftUI]TextFieldのキーボードにツールバーを追加するには？

SwiftUI

2022.03.01

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

TextFieldのキーボードにツールバーを追加する方法を紹介します。

方法
使用例

方法

TextFieldのキーボードにツールバーを追加するには、toolbar修飾子を使います。

まず、TextFieldにtoolbar修飾子を付与します。

次に、toolbarのクロージャーにToolbarItemGroupを追加し、ToolbarItemGroupの引数「placement」に「.keyboard」を指定します。

最後に、ToolbarItemGroupのクロージャーにツールバーに表示するビューを指定します。

TextField(・・・)
    .toolbar {
        ToolbarItemGroup(placement: .keyboard) {
            ToolbarView() //ツールバーに表示するビュー
        }
    }

toolbar修飾子を使うことで、TextFieldのキーボードにツールバーを追加することが出来ます。

使用例

struct ContentView: View {
    
    @State var editingText = ""
    @FocusState var isInputActive: Bool
    
    var body: some View {
        VStack {
            TextField("input", text: $editingText)
                .padding()
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Button("Cancel") {
                            self.isInputActive = false
                        }
                    }
                }
        }
    }
}