SwiftUI: TextField에서 Combine을 사용하여 텍스트 필드 변경에 대한 업데이트를 가져옵니다.

Combine 를 SwiftUI TextField 와 함께 사용하면 텍스트 필드 TextField 에 입력된 콘텐츠 사용자에 대한 업데이트를 얻을 수 있습니다.

이 기사에서는 다음에 대해 설명합니다.
- Combine 를 사용하여 TextField 변경 사항 모니터링
- 사용자가 텍스트 필드에 입력할 수 있는 문자 수 제한
- 사용자의 비밀번호에 최소한의 대문자, 기호, 숫자가 포함되어 있는지, 문자 수 제한을 초과하지 않았는지 확인합니다.

Combine을 사용하여 TextField 변경 사항 모니터링

코드는 간단합니다. 먼저 Combine 프레임워크를 가져와야 합니다. 그런 다음 .onReceive(Just(messageText)) 뷰 수정자를 TextField에 추가하십시오.

완전한 코드는 여기 :

import SwiftUI
import Combine

struct ContentView: View {
    @State var messageText: String = ""
    var body: some View {
        Form {
            TextField("Message", text: $messageText)
                .onReceive(Just(messageText)) { _ in
                    // テキストを変更する場合にはこちらにコードを入力して下さい
                }
                .padding()
        }
    }
}

이제 .onReceive 블록의 코드는 텍스트 내용이 바뀔 때마다 호출됩니다.

이 기사에서는 위의 코드를 사용하여 추가할 수 있는 몇 가지 기능에 대해 설명합니다.

사용자가 텍스트 필드에 입력할 수 있는 문자 수 제한

사용자가 SwiftUI TextField에 입력할 수 있는 문자 수를 제한할 수 있습니다. 사용자가 제한을 초과하는 문자를 입력하면 추가 텍스트를 삭제할 수 있습니다.

import SwiftUI
import Combine

struct ContentView: View {
    @State var messageText: String = ""
    var body: some View {
        Form {
            TextField("メッセージ", text: $messageText)
                .onReceive(Just(messageText)) { _ in
                    if messageText.count > 30 {
                        messageText = String(messageText.prefix(30))
                    }
                }
                .padding()
            Text(String(messageText.count))
        }
    }
}

사용자에게 안전한 비밀번호를 선택하도록 요청하세요.

사용자가 입력한 비밀번호가 최소한 하나의 대문자, 하나의 기호, 숫자를 포함하고 있는지, 또는 너무 길지 않은지 확인할 수 있습니다.

import SwiftUI
import Combine

struct ContentView: View {

    @State var messageText: String = ""

    @State var hasCapitalLetter: Bool = false
    @State var hasSymbol: Bool = false
    @State var lengthExceeds16: Bool = false

    var body: some View {

        Form {
            TextField("メッセージ", text: $messageText)
                .onReceive(Just(messageText)) { _ in
                    self.lengthExceeds16 = (messageText.count > 16)
                    // 大文字
                    let capitalLetterExpression  = ".*[A-Z]+.*"
                    let capitalLetterCondition = NSPredicate(format:"SELF MATCHES %@", capitalLetterExpression)
                    self.hasCapitalLetter = capitalLetterCondition.evaluate(with: messageText)
                    // 数字: ".*[0-9]+.*"
                    // 符号
                    let symbolExpression  = ".*[!&^%$#@()/]+.*"
                    let symbolCondition = NSPredicate(format:"SELF MATCHES %@", symbolExpression)
                    self.hasSymbol = symbolCondition.evaluate(with: messageText)
                }
                .padding()
            // ユーザーによるパスワード入力をご希望の場合は、`SecureField` をご利用下さい。
            Text(String(messageText.count))
                .keyboardType(.asciiCapable)
                .autocapitalization(.none)
                .disableAutocorrection(true)
            // パスワード 条件
            PasswordConditionDisplay(isConditionMet: $hasCapitalLetter, conditionName: "大文字")
            PasswordConditionDisplay(isConditionMet: $hasSymbol, conditionName: "符号")
            PasswordConditionDisplay(isConditionMet: $lengthExceeds16, conditionName: "パスワードは16文字を越える必要があります")
        }

    }

}

struct PasswordConditionDisplay: View {
    @Binding var isConditionMet: Bool
    var conditionName: String
    var body: some View {
        HStack {
            Image(systemName: isConditionMet ? "circle.fill" : "xmark")
                .padding(.horizontal, 5)
            Text(conditionName)
        }
    }
}

트위터 @MszPro

내 게시된 Qiita 기사 목록을 카테고리별로 확인할 수 있습니다.