はじめに

LabelStyleやButtonStyleは使ったことがあったのですが、TextFieldStyleは使ったことがなかったので使ってみます。

Twitterの検索バー的なのを作ってみる

実装

struct WithCancelTextFieldStyle: TextFieldStyle {
    @FocusState private var isFocused
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        HStack(spacing: 8) {
            HStack(spacing: 8) {
                Image(systemName: "magnifyingglass")
                
                configuration
            }
            .padding(.vertical, 10)
            .padding(.horizontal, 12)
            .background(.secondary.opacity(0.3), in: Capsule())
            
            Button {
                isFocused = false
            } label: {
                Text("Cancel")
            }
            .foregroundStyle(.primary)
        }
    }
}

extension TextFieldStyle where Self == WithCancelTextFieldStyle {
    static var withCancel: WithCancelTextFieldStyle {
        .init()
    }
}

使い方

struct SampleView: View {
    @State private var text = ""

    var body: some View {
        VStack {
            TextField("検索", text: $text)
                .textFieldStyle(.withCancel)
        }
        .padding(.horizontal, 16)
    }
}

おわり

bodyに_がついてるのが気になります。