SwiftUIで TextField にクリアボタンをつける方法

TextField にクリアボタンを付けたい

　TextField に文字が入力されたら、フイールドの右端に入力されたテキストを全部消すためのクリアボタンを付けたいと思ってネットを探したが、結構古い情報があって、やってみるとエラーになるものが多かった。
かつては UITextField のプロパティ ClearButton の設定を「Is always visible」に設定するだけだったのだが、SwiftUIのフレームワークにある TextField には ClearButton プロパティが無いので、自分で実装する必要があるらしい。

　成功した方法を見つけたサイトの情報は末尾に書いておくので詳しくはそちらを。

実現できたソース

クリアボタンを付けることができた。　
クリアボタンはテキストフィールド内に表示させる場合と、テキストフィールドの外に表示させる場合の2種類を紹介する。

（1）テキストフィールド内にクリアボタンを付ける

　テキストフィールド内にクリアボタンを付けるソースは以下のとおり。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        Form {
            Section() {
                TextField("NAME", text: $text)
                    .modifier(TextFieldClearButton(text: $text))
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
        }
    }
}

struct TextFieldClearButton: ViewModifier {
    @Binding var text: String
    
    func body(content: Content) -> some View {
        ZStack(alignment: .trailing)
        {
            content
            if !text.isEmpty {
                Button(
                    action: {
                        self.text = ""
                        
                    })
                {
                    Image(systemName: "delete.left")
                        .foregroundColor(Color(UIColor.opaqueSeparator))
                }
                .padding(.trailing, 8)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

テキストフィールドの右外にクリアボタンを付ける

　　テキストフィールドの外側（右側）にクリアボタンを付けるソースは以下のとおり。

ContentoView.swift

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        Form {
            Section() {
                TextField("NAME", text: $text)
                    .modifier(TextFieldClearButton(text: $text))
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
        }
    }
}

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")
                        .foregroundColor(Color(UIColor.opaqueSeparator))
                }
                .padding(.trailing, 8)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

参考になったサイト