如何根据文本字段输入更改图像答案

【问题标题】：How to change image based on textfiled input如何根据文本字段输入更改图像
【发布时间】：2021-05-05 15:28:00
【问题描述】：

我有一个信用卡号码输入，我正在尝试根据用户输入的号码在文本字段旁边添加信用卡品牌的图像。无论是签证，万事达卡等。

我已经为信用卡创建了一个结构：

struct CreditCard: Identifiable, Codable {
    var id: String = UUID().uuidString
    var type: String
    var prefix: [Int]
    var length: Int
}

我已经在本地添加了信用卡数据：

let cardTypes: [CreditCard] = [
    CreditCard(type: "American Express", prefix: [34, 37], length: 15),
    CreditCard(type: "Visa", prefix: [4], length: 16),
    CreditCard(type: "Master Card", prefix: [51, 52, 53, 54], length: 16),
    CreditCard(type: "Discover", prefix: [6011], length: 16),
    CreditCard(type: "JCB", prefix: [3, 2131, 1800], length: 15)
]

我已使用以下方法将数据导入到我的视图中：

var creditCards: [CreditCard] = cardTypes

例如，我想仅当文本输入中的第一个数字是 51、52、53 或 54 时才显示保存在我的资产文件夹中的名为“Master Card”的图像。

我正在使用 swiftui 文本字段

感谢您的帮助，谢谢！

【问题讨论】：

我猜如果你能确定卡片类型，你可以很容易地确定图像。你能确定卡片类型吗？用户将从上述对象中选择 1 种卡片类型使用权？

标签： swift swiftui

【解决方案1】：

这是 SwiftUI 的解决方案。

在 Asset 文件夹中添加您的徽标。然后像这样将图像的名称存储在您的CreditCard 模型中

struct CreditCard: Identifiable, Codable {
    var id: String = UUID().uuidString
    var type: String
    var prefix: [Int]
    var length: Int
    var imageName: String
}

在这里，我使用imageName 为两张信用卡创建了示例数据。

let cardTypes: [CreditCard] = [
    CreditCard(type: "Visa", prefix: [4], length: 16, imageName: "visa"),
    CreditCard(type: "Master Card", prefix: [51, 52, 53, 54], length: 16, imageName: "mastercard")
]

然后使用ProxyBinding检查输入的文本并设置图像。

struct ContentView: View {
    @State var string: String = ""
    var creditCards: [CreditCard] = cardTypes
    
    @State var imageName: String = ""
    
    var body: some View {
        HStack(spacing: 8) {
            
            if imageName != "" {
                Image(imageName)
                    .resizable()
                    .frame(width: 32, height: 25)
            } else {
                Rectangle()
                    .foregroundColor(.gray)
                    .frame(width: 32, height: 25)
            }
            
            TextField("Card Number", text: Binding<String>( get: {
                return string
            }, set: {
                string = $0
                
                let trimmedText = string.trimmingCharacters(in: .whitespaces)
                
                guard string.count >= 1,
                      trimmedText != "" else {
                    imageName = ""
                    return
                }
                
                for card in creditCards {
                    for prefix in card.prefix {
                        if trimmedText.hasPrefix(String(prefix)) {
                            imageName = card.imageName
                            return
                        }
                    }
                }
                
                imageName = ""
            }))
        }
        .padding(.horizontal, 16)
    }
}

【讨论】：