iOS SwiftUI 数据表单Form从菜鸟到高手的四种实现方案

采集数据、处理数据、展示数据是一个程序的最基本功能。今天我们来学习一下如何使用SwiftUI的Form来采集数据。

本期我们以最基础的用户注册界面为例子，向大家介绍一下数据收集的四种不同水平的实现方式。

初学者方式

相信长期看我专栏的朋友，应该可以快速搭建起下面的界面。非常简单就是VStack、HStack、TextField等组件的简单组合而已。

import SwiftUI

struct SignUpForm0: View {
    @State var username = ""
    @State var email = ""
    
    var body: some View {
        NavigationView{
            Form {
                Text("初学者做的用户注册界面").font(.headline)
                HStack {
                    Image(systemName: "person.circle.fill")
                    TextField("Username", text: $username)
                }
                HStack {
                    Image(systemName: "envelope.circle.fill")
                    TextField("Email", text: $email)
                }
                Button(
                    action: { print("here") },
                    label: { Text("提交") }
                )
            }.navigationBarTitle(Text("用户注册界面"))
        }
    }
}

入门级方式

入门级的界面和初学者的完全一样，但是在构建界面时却开始使用模块化思想了。
初学者阶段，我们使用了两次相同的HStack + Image + TextField组合，但这并不一定是问题，因为我们对两个文本字段的配置都大不相同。但假设我们想在其他地方也复用这些代码，该如何操作呢。其实非常简单，我们将这些代码封装成一个独立的组件即可。

为了实现这个想法，我们先创建一个struct视图，然后将Image和Text都封装进入，最后通过@Bingding来进行数值的传递。

struct IconPrefixedTextField: View {
    var iconName: String
    var title: String
    @Binding var text: String
    
    var body: some View {
        HStack {
            Image(systemName: iconName)
            TextField(title, text: $text)
        }
    }
}

在主界面中，使用新创建的组件进行数据收集。怎么样代码变得更简洁了吧。

import SwiftUI

struct SignUpForm1: View {
    @State var username = ""
    @State var email = ""
    
    var body: some View {
        NavigationView{
            Form {
                Text("入门后做的用户注册界面").font(.headline)
                IconPrefixedTextField(
                    iconName: "person.circle.fill",
                    title: "Username",
                    text: $username
                )
                IconPrefixedTextField(
                    iconName: "envelope.circle.fill",
                    title: "Email",
                    text: $email
                )
                Button(
                    action: { print("here") },
                    label: { Text("提交") }
                )
            }.navigationBarTitle(Text("用户注册界面"))
        }
    }
}

中级水平

刚才，我们看过初学者快速的构建界面，入门级的采用模块化编程思想，那么中级选手会如何实现呢。
中级选手会告诉我们上面两种实现方式都不是SwiftUI都佳实现模式。尽管上述更改将使我们能够在SignUpForm之外重用我们新的IconPrefixedTextField类型，但是否最终改善了我们的原始代码却值得怀疑。毕竟，我们并没有真正简化注册表单的实现过程。实际上，调用方式上看起来比以前还复杂了很多。

我们还是从SwiftUI自己的API设计中汲取一些灵感吧，看看如果将文本视图配置代码改为View扩展来实现的话，会是什么样子。

extension View {
    func prefixedWithIcon(named name: String) -> some View {
        HStack {
            Image(systemName: name)
            self
        }
    }
}

上面代码非常简单，我们就是对View视图进行一下拓展，丰富一下View组合。extension做好后，我们就可以用SwiftUI的链式调用方法来进行界面配置了。

TextField("Username", text: $username)
                    .prefixedWithIcon(named: "person.circle.fill")

完成上述操作后，我们现在可以将任何SF Symbols图标直接添加到SwiftUI中的TextField视图或其他任何视图中.

下面我们来看看项目的完整代码

import SwiftUI

struct SignUpForm2: View {
    @State var username = ""
    @State var email = ""
    
    var body: some View {
        NavigationView{
            Form {
                Text("中级水平做的用户注册界面").font(.headline)
                
                TextField("Username", text: $username)
                    .prefixedWithIcon(named: "person.circle.fill")
                TextField("Email", text: $email)
                    .prefixedWithIcon(named: "envelope.circle.fill")
                
                Button(
                    action: { print("here") },
                    label: { Text("提交") }
                )
            }.navigationBarTitle(Text("用户注册界面"))
        }
    }
}

中高级水平

中级水平已经对界面进行SwiftUI式的改造，中高级选手就开始将注意力集中在业务逻辑方面了。例如，对输入内容验证方面。我们先看看下面的动图。

iOS SwiftUI 数据表单Form从菜鸟到高手的四种实现方案

假如我们想要求用户的名称必须大于5位，邮件必须是邮件格式，并且只有满足上面两个条件后才会出现提交按钮，这类稍稍复杂的效果该如何实现呢？

实现方式有很多种，但是最简洁、最灵活、最高效的实现方式是什么呢？

答案当然是SwiftUI式的编码方式。下面我就带领大家来实现一下吧！

第一步编写个验证邮件的函数

我个人比较喜欢用NSPredicate来实现

func isValidEmail(_ email: String) -> Bool {
    let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"

    let emailPred = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
    return emailPred.evaluate(with: email)
}

第二步创建 ViewModifier 当用户满足条件就让边框变为绿色

struct Validation<Value>: ViewModifier {
    var value: Value
    var validator: (Value) -> Bool
    
    func body(content: Content) -> some View {
        // Here we use Group to perform type erasure, to give our
        // method a single return type, as applying the 'border'
        // modifier causes a different type to be returned:
        Group {
            if validator(value) {
                content.border(Color.green)
            } else {
                content
            }
        }
    }
}

主页面

struct SignUpForm3: View {
    @State var username = ""
    @State var email = ""
    @State var uFlag = false
    @State var eFlag = false
    
    
    var body: some View {
        NavigationView{
            Form {
                Text("中高级做的用户注册界面").font(.headline)
                TextField("Username", text: $username)
                    .modifier(Validation(value: username) { name in
                        self.uFlag = name.count > 4
                        return self.uFlag
                        
                    })
                    .prefixedWithIcon(named: "person.circle.fill")
                
                TextField("Email", text: $email)
                    .modifier(Validation(value: email) { name in
                        self.eFlag = isValidEmail(name)
                        return self.eFlag
                        
                    })
                    .prefixedWithIcon(named: "envelope.circle.fill")
                
                if (self.uFlag && self.eFlag){
                Button(
                    action: {print("here")},
                    label: { Text("提交") }
                )
                }
            }.navigationBarTitle(Text("用户注册界面"))
        }
    }
}