文本字段之间的空间 SwiftUI

Question

这是我的信用卡文本字段

 struct CreditCardView: View {

@State private var number: String = ""
var body: some View{
    TextField("Card number", text: $number)
        .textFieldStyle(
            RoundedBorderTextFieldStyle()
        )
        .padding([.top])
  }
}

这是我的卡号文字

 struct CreditCardFront: View {
    let number: String
    var body: some View {
                Text(number)
                    .font(.system(size: 24, weight: .bold, design: .default))
                    .foregroundColor(.white)
    }
   }

如何在每 4 个数字之间插入空格？ 现在，当我用 1234123412341234 填充文本字段时，我看到 1234123412341234。

我想看到这些数字为 1234 1234 1234 1234

Answer 1

使用字符串扩展并应用模式。

extension String {
    func applyPattern(pattern: String = "#### #### #### ####", replacmentCharacter: Character = "#") -> String {
        var pureNumber = self.replacingOccurrences( of: "[^0-9]", with: "", options: .regularExpression)
        for index in 0 ..< pattern.count {
            guard index < pureNumber.count else { return pureNumber }
            let stringIndex = String.Index(utf16Offset: index, in: self)
            let patternCharacter = pattern[stringIndex]
            guard patternCharacter != replacmentCharacter else { continue }
            pureNumber.insert(patternCharacter, at: stringIndex)
        }
        return pureNumber
    }
}

用法

struct CreditCardFront: View {
    let number: String
    var body: some View {
        Text(number.applyPattern()) //<-- Use here
            .font(.system(size: 24, weight: .bold, design: .default))
    }
}