[SwiftUI] SecureField の使用方法

SecureField はパスワード入力用のテキストインターフェースを提供します。
今回は、SecureField の使用方法について説明します。

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

SecureField の基本使用方法

SecureField の基本的な構文は以下の通りです。
第１引数には、入力欄が空の場合に表示される文字列（※）を指定し、第２引数には入力された文字列を格納するための String 型変数を指定します。この String 型の変数は @State 等で宣言をしておく必要があります。この第２引数の変数の先頭には $ を付けて参照渡しにして、SecureField がプロパティ値を更新できるようにしておきます。
※この文字列のことをプレースホルダと呼びます。

SecureField("プレースホルダ", text: $value)

以下にコード例を示します。
このコードでは、入力欄に「パスワードを入力」と表示し、入力された文字列は変数 value に格納されます。

struct ContentView: View {
    @State var strPassword  = ""
    var body: some View {
        SecureField("パスワードを入力", text: $strPassword)
    }
}

実行して文字を入力すると伏字（●）に変換されることがわかります。

SecureField の使用例

枠線を付ける

実際に動かしてみるとわかるのですが、先程の例では SecureField に枠線がないため、入力可能な範囲がわかりにくくなっています。
枠線を付けるには textFieldStyle() モディファイアを使用します。
以下のスタイルを使用することができます。

コード例を以下に示します。

struct ContentView: View {
    @State var strPassword1  = ""
    @State var strPassword2  = ""
    @State var strPassword3  = ""
    var body: some View {
        VStack {
            TextField("DefaultTextFieldStyle", text: $strPassword1)
                .textFieldStyle(DefaultTextFieldStyle())
                .padding()
            TextField("PlainTextFieldStyle", text: $strPassword2)
                .textFieldStyle(PlainTextFieldStyle())
                .padding()
            TextField("RoundedBorderTextFieldStyle", text: $strPassword3)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
        }
    }
}

SecureField に枠線を付ける例

入力されたパスワードを確認する

SecureField に入力された内容が、変数に格納されているかを確認するために Text に表示してみましょう。
以下にコード例を示します。
入力されたパスワードを保持する変数として @State を付けた「strPassword」を宣言しています。。
Text の引数には「strPassword」を渡していますので、SecureField に入力したパスワードが表示されます。

struct ContentView: View {
    @State var strPassword  = ""
    var body: some View {
        SecureField("パスワードを入力", text: $strPassword)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
        Text(strPassword)
    }
}

パスワードを確認する例

入力された文字数を判断する

SecureField の以下の書式を使用すると、「入力が終了した」ということを判断して処理をすることができます。

init(
    _ titleKey: LocalizedStringKey, 
    text: Binding, 
    onCommit: @escaping () -> Void = {})

以下にコード例を示します。
この例は、SecureField に入力された文字数が8文字未満の場合に「パスワードは8文字以上を入力してください」というアラートを表示します。
TextField の第３引数に onCommit を渡しており、入力された文字数が8未満のときに showingAlert に true をセットしています。
後続の .alert で showingAlert の値が true であると判断した場合にアラートが表示されるようにしています。

struct ContentView: View {
    @State var strPassword  = ""
    @State var showingAlert = false
    var body: some View {
        SecureField(
            "パスワードを入力",
            text: $strPassword,
            /// リターンキーが押された時の処理
            onCommit: {
                if self.strPassword.count < 8 {
                    self.showingAlert = true
                }
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
            .alert(isPresented: $showingAlert) {
                Alert(title: Text("パスワードは8文字以上を入力してください"))
            }
    }
}

パスワードの文字数を確認する例