[SwiftUI] TextFieldのmodifierに@FocusStateのProperty Wrapperを渡す

概要

TextFieldのmodifierを使用してキャンセルボタン付きのTextFieldを作る。
キャンセルボタンを押すとフォーカスを外してキーボードが閉じるようにする。

環境

Xcode 14.0.1
iOS 15.5以上

@FocusStateのProperty WrapperをModifierに渡す

TextField側では@FocusStateだがModifier側では@FocusState.Bindingをつける

@FocusState.Binding var isFocused: Bool

作成したModifier

import SwiftUI

struct CancelModifier: ViewModifier {
    @FocusState.Binding var isFocused: Bool
    @State private var showCancelButton: Bool = false

    func body(content: Content) -> some View {
        HStack {
            content
            
            if showCancelButton {
                Button {
                    isFocused = false
                } label: {
                    Text("キャンセル")
                        .foregroundColor(.primary)
                }
                .transition(.move(edge: .trailing))
            }
        }
        .onChange(of: isFocused) { isfocused in
            withAnimation {
                showCancelButton = isfocused
            }
        }
    }
}

使い方

struct ContentView: View {
    @State private var text: String = ""
    @FocusState private var isTextFieldFocused: Bool

    var body: some View {
        
        VStack {
            TextField("Placeholder", text: $text)
                .focused($isTextFieldFocused)
                .modifier(CancelModifier(isFocused: $isTextFieldFocused))
                .textFieldStyle(.roundedBorder)
                .autocapitalization(.none)
                .padding(.horizontal)
            
            Spacer()
        }
    }
}

キャンセルボタンに.transition(.move(edge: .trailing))を指定すると右から出てきて右からでていくトランジションをつけることができていい感じになります。

補足

プレビューではキーボードが出ないため？ orフォーカスが正しくとれない？ため動作確認できませんでした。