SwiftUIのSecureFieldにて、パスワードをアンロックしたい場合の方法についてご存知の方いらっしゃいますか？

Question

ご存知の方お教えください。

よくアプリで、パスワード入力欄の右端に目のアイコンがついている入力欄を見かけます。
目のアイコンマークをタップするとパスワードが●で表現されていたところが見えるUIがあります。
このUIをswiftUIで実現したいのですが、SecureFieldだと
目のアイコンのように●マークを解除する方法が、プロパティになさそうです。

皆さんは、SecureFieldのオーバーレイするか、そのほかの方法でUIの実現をしますでしょうか。
もしくは、swiftのUIKITで表現しますか。

アプローチされた方がいらっしゃいましたらお教え頂けないでしょうか。

Answer 1

@Stateで変数を定義し、SecureFieldかTextFieldかどちらを表示するか切り分ければよいと思います。

struct ContentView: View {
    @State var isSecure = true
    @State var password = ""
    var body: some View {
        VStack {
            if isSecure {
                SecureField("パスワード入力欄", text: $password)
            } else {
                TextField("パスワード入力欄", text: $password)
            }
            Button("パスワード文字表示切り替え") {
                self.isSecure.toggle()
            }
        }
    }
}

Comments

[n_ozawa]

ご回答ありがとうございます。参考になるコードもありがとうございます。
疑問点解決しました。
丁寧なご回答ありがとうございました。