[SwiftUI]TextField(テキストフィールド)にクリアボタン(clear button)を追加(add)するには？

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

TextFieldのテキストを全消去するクリアボタンを追加する方法を紹介します。

方法
使用例

方法

TextFieldにクリアボタンを追加するには、自作のモディファイアを使います。

まず、ViewModifierを継承したモディファイアの雛形を作ります。

struct TextFieldClearButton: ViewModifier {
    func body(content: Content) -> some View {}
}

次に、TextFieldのテキストを操作するための@Binding変数を用意します。

そして、bodyメソッドでTextFieldの右側にButtonを配置します。

Buttonの処理では、用意した@Binding変数をクリアします。

struct TextFieldClearButton: ViewModifier {
    @Binding var text: String
    
    func body(content: Content) -> some View {
        HStack {
            content

            //クリアボタン  
            if !text.isEmpty {
                Button(
                    action: {
                        self.text = ""
                    }
                ){
                    Image(systemName: "delete.left")
                }
                
            }

        }
    }
}

最後に、クリアボタンを追加するTextFieldに用意したモディファイアを適用します。

TextField("your text", text: $editingText)
       .modifier(TextFieldClearButton(text: $editingText))

使用例

以下は、使用例です。

import SwiftUI

struct SampleView: View {
    @State var editingText = ""
    var body: some View {
        VStack{
            TextField("your text", text: $editingText)
                .modifier(TextFieldClearButton(text: $editingText))
                .frame(width: 300)
        }
    }
}

struct TextFieldClearButton: ViewModifier {
    @Binding var text: String
    
    func body(content: Content) -> some View {
        HStack {
            content
            if !text.isEmpty {
                Button(
                    action: {
                        self.text = ""
                    }
                ){
                    Image(systemName: "delete.left")
                }  
            }
        }
    }
}