SwiftUI: ToolbarItem(placement: .keyboard)とNavigationStackの相性

以前に、仮想キーボードに閉じるボタンをつける際にちょっとハマった話を書きました。

もう1回ハマったので、再度書きます。

まず、当該テキストフィールドにフォーカスが当たっているかどうかで、キーボードの閉じる閉じないを制御する必要がある、という話をおさらいします。

struct TextFieldWithCloseKeyboardButton: View {
    var title: LocalizedStringKey
    @Binding var text: String
    var prompt: LocalizedStringKey
    var closeButtonTitle: LocalizedStringKey
    @FocusState var isFocused: Bool
    
    var body: some View {
        TextField(self.title, text: $text, prompt: Text(self.prompt))
            .focused($isFocused)
            .toolbar {
                if isFocused {
                    ToolbarItem(placement: .keyboard) {
                        HStack {
                            Spacer()
                            Button(self.closeButtonTitle) {
                                isFocused = false
                            }
                        }
                    }
                }
            }
    }
}

struct TextFieldWithCloseKeyboardButtonWithoutFocusControl: View {
    var title: LocalizedStringKey
    @Binding var text: String
    var prompt: LocalizedStringKey
    var closeButtonTitle: LocalizedStringKey
    @FocusState var isFocused: Bool
    
    var body: some View {
        TextField(self.title, text: $text, prompt: Text(self.prompt))
            .focused($isFocused)
            .toolbar {
                ToolbarItem(placement: .keyboard) {
                    HStack {
                        Spacer()
                        Button(self.closeButtonTitle) {
                            isFocused = false
                        }
                    }
                }
            }
    }
}

仮想キーボードに「閉じる」ボタンが付く機能を持つカスタムテキストフィールドを2種類定義します。
1つは、自分にフォーカスが当たっているときだけ「閉じる」が付くもの(TextFieldWithCloseKeyboardButton)。もう1つは、常に「閉じる」が付いてしまうもの(TextFieldWithCloseKeyboardButtonWithoutFocusControl)。

ビューは以下のようにしてみます。

struct ContentView: View {
    @State var text1: String = ""
    @State var text2: String = ""
    
    var body: some View {
        NavigationStack {
            TextFieldWithCloseKeyboardButtonWithoutFocusControl(title: "名前", text: $text1, prompt: "名前", closeButtonTitle: "閉じる(名前)")
                .textFieldStyle(.roundedBorder)
            TextFieldWithCloseKeyboardButtonWithoutFocusControl(title: "住所", text: $text2, prompt: "住所", closeButtonTitle: "閉じる(住所)")
                .textFieldStyle(.roundedBorder)
//            TextFieldWithCloseKeyboardButton(title: "名前", text: $text1, prompt: "名前", closeButtonTitle: "閉じる(名前)")
//                .textFieldStyle(.roundedBorder)
//            TextFieldWithCloseKeyboardButton(title: "住所", text: $text2, prompt: "住所", closeButtonTitle: "閉じる(住所)")
//                .textFieldStyle(.roundedBorder)
        }
        .padding()
        
    }
}

フォーカスが当たっているかどうかをコントロールしない場合、フィールドを2つ画面に置くと、閉じるボタンも2つ付いてしまいます。（フィールドを3つ置けば、閉じるボタンも3つになります）

その上でフォーカスが当たっているフィールド用の「閉じる」しか機能しません。

こういうことを避けるため、フォーカスが当たっているかどうかによって、閉じるを付ける付けないを制御する必要があります。