SwiftUI中如何结合ParseableFormatStyle为可选字符串类型使用TextField？

嘿，我懂你在SwiftUI表单里用可选绑定TextField时的纠结——尤其是想结合ParseableFormatStyle来处理那些可选类型的字段，比如人名、年龄这些，对吧？别慌，咱们一步步来搞定这些场景～

首先得明确：SwiftUI的TextField默认对非可选值支持更顺畅，但对于可选类型（比如PersonNameComponents?、Int?、String?），咱们需要做一点点适配，结合ParseableFormatStyle的话，核心就是处理好**格式化（把可选值转成显示的字符串）和解析（把用户输入的字符串转回可选值）**这双向逻辑。

1. 基础可选值：比如Int?类型的年龄 #

对于系统自带的可解析类型（比如Int），其实不用太复杂，直接用TextField的value:format:初始化器就行，它会自动处理解析失败或者空输入的情况，把可选值设为nil。

举个例子：

@State private var age: Int? = nil

// 直接用系统的.number格式
TextField("Enter your age", value: $age, format: .number)
    .textFieldStyle(.roundedBorder)

当用户输入数字时，age会被正确赋值；如果清空输入或者输入非数字，age就会自动变成nil，是不是很省心？

2. 自定义可选类型：比如PersonNameComponents?的全名 #

如果是像PersonNameComponents这种自定义格式的类型，咱们得先自己实现一个符合ParseableFormatStyle的格式样式，来定义怎么把人名转成字符串，以及怎么把输入的字符串转回人名。

先写自定义的格式样式：

struct PersonNameFormatStyle: ParseableFormatStyle {
    // 指定输入是PersonNameComponents，输出是String
    typealias FormatInput = PersonNameComponents
    typealias FormatOutput = String
    
    // 把人名组件格式化成显示的字符串
    func format(_ value: PersonNameComponents) -> String {
        "\(value.givenName ?? "") \(value.familyName ?? "")".trimmingCharacters(in: .whitespaces)
    }
    
    // 把用户输入的字符串解析成人名组件，处理空输入的情况
    func parse(_ value: String) throws -> PersonNameComponents {
        let trimmedInput = value.trimmingCharacters(in: .whitespaces)
        guard !trimmedInput.isEmpty else {
            throw ParsingError.emptyInput
        }
        // 按空格分割名和姓
        let nameParts = trimmedInput.split(separator: " ", maxSplits: 1)
        var components = PersonNameComponents()
        components.givenName = nameParts.first.map(String.init)
        if nameParts.count > 1 {
            components.familyName = nameParts.last.map(String.init)
        }
        return components
    }
    
    // 自定义解析错误
    enum ParsingError: Error {
        case emptyInput
    }
}

// 扩展FormatStyle，方便调用
extension FormatStyle where Self == PersonNameFormatStyle {
    static var personName: PersonNameFormatStyle { PersonNameFormatStyle() }
}

然后，咱们需要给可选的PersonNameComponents?创建一个自定义Binding，把它转换成TextField能直接用的Binding<String>：

@State private var name: PersonNameComponents? = nil

private var nameBinding: Binding<String> {
    Binding(
        get: {
            // 如果name有值，就格式化显示；否则显示空字符串
            name.map { FormatStyle.personName.format($0) } ?? ""
        },
        set: { input in
            // 尝试解析输入的字符串，失败就把name设为nil
            do {
                name = try FormatStyle.personName.parse(input)
            } catch {
                name = nil
            }
        }
    )
}

最后在视图里用这个绑定就行：

TextField("Enter your full name", text: nameBinding)
    .textFieldStyle(.roundedBorder)

3. 可选字符串类型：比如String?的密码 #

对于String?这种最基础的可选字符串，咱们只需要把空字符串和nil做个映射就行，因为TextField默认只接受非空的Binding<String>。

写个自定义Binding：

@State private var password: String? = nil

private var passwordBinding: Binding<String> {
    Binding(
        get: { password ?? "" },
        set: {
            // 如果输入为空，就把password设为nil；否则保留输入内容
            password = $0.isEmpty ? nil : $0
        }
    )
}

然后用SecureField（或者TextField）绑定它：

SecureField("Enter password", text: passwordBinding)
    .textFieldStyle(.roundedBorder)

完整示例代码 #

把上面的场景整合到一个ContentView里，你可以直接测试：

import SwiftUI

struct PersonNameFormatStyle: ParseableFormatStyle {
    typealias FormatInput = PersonNameComponents
    typealias FormatOutput = String
    
    func format(_ value: PersonNameComponents) -> String {
        "\(value.givenName ?? "") \(value.familyName ?? "")".trimmingCharacters(in: .whitespaces)
    }
    
    func parse(_ value: String) throws -> PersonNameComponents {
        let trimmedInput = value.trimmingCharacters(in: .whitespaces)
        guard !trimmedInput.isEmpty else {
            throw ParsingError.emptyInput
        }
        let nameParts = trimmedInput.split(separator: " ", maxSplits: 1)
        var components = PersonNameComponents()
        components.givenName = nameParts.first.map(String.init)
        if nameParts.count > 1 {
            components.familyName = nameParts.last.map(String.init)
        }
        return components
    }
    
    enum ParsingError: Error {
        case emptyInput
    }
}

extension FormatStyle where Self == PersonNameFormatStyle {
    static var personName: PersonNameFormatStyle { PersonNameFormatStyle() }
}

struct ContentView: View {
    @State private var name: PersonNameComponents? = nil
    @State private var age: Int? = nil
    @State private var password: String? = nil
    
    private var nameBinding: Binding<String> {
        Binding(
            get: {
                name.map { FormatStyle.personName.format($0) } ?? ""
            },
            set: { input in
                do {
                    name = try FormatStyle.personName.parse(input)
                } catch {
                    name = nil
                }
            }
        )
    }
    
    private var passwordBinding: Binding<String> {
        Binding(
            get: { password ?? "" },
            set: {
                password = $0.isEmpty ? nil : $0
            }
        )
    }
    
    var body: some View {
        NavigationStack {
            List {
                TextField("Enter your full name", text: nameBinding)
                    .textFieldStyle(.roundedBorder)
                
                TextField("Enter your age", value: $age, format: .number)
                    .textFieldStyle(.roundedBorder)
                
                SecureField("Enter password", text: passwordBinding)
                    .textFieldStyle(.roundedBorder)
                
                // 用来预览当前的可选值状态
                Section("Current Values") {
                    Text("Name: \(name.map { "\($0.givenName ?? "") \($0.familyName ?? "")" } ?? "Not set")")
                    Text("Age: \(age.map(String.init) ?? "Not set")")
                    Text("Password: \(password ?? "Not set")")
                }
            }
            .navigationTitle("Optional Form Fields")
        }
    }
}

#Preview {
    ContentView()
}

这个例子里，你可以输入全名、年龄、密码，然后在下方的“Current Values”区域看到可选值的变化——清空输入的话，对应的可选值就会变成nil，完全符合咱们的需求～

备注：内容来源于stack exchange，提问作者MohAliBou