SwiftUI极简教程29:Combine异步编程框架和MVVM开发模式的使用（上）

一同养成写作习气！这是我参加「日新计划 4 月更文挑战」的第29天，点击查看活动详情。

今天职言：不要为昨日已发生的工作而悔恨，也不要为明天未发生的工作而畏缩。

在本章中，你将学会如何运用Combine异步编程结构和MVVM开发模式完结一个登录注册页面及其逻辑交互。

在简直所有App中，都需求一个用户注册登录页面，用来获取和绑定用户信息。用户量，特别是付费用户量，决定这一款产品能否成为爆款产品。

因而，做好注册登录页面是非要有必要的。

那么，咱们开始吧。

项目创建

首先，创建一个新项目，命名为SwiftUIRegistration。

主要页面制作

咱们简单剖析下页面组成，它由一个用户称号输入框、一个暗码输入框、一个暗码二次确认输入框组成。

首先是用户称号输入框，它是一个简答的TextField输入框，咱们只需求运用@State初始化存储一个String类型的参数，绑定就能够了。

//用户名
TextField("用户名", text: $username)
 .font(.system(size: 20, weight: .semibold))
 .padding(.horizontal)

然后是暗码输入框，它有点不同，在SwiftUI中，除了TextField输入框外，还有一种暗码类型的输入框SecureField，运用方法和TextField输入框类似。

//暗码
SecureField("暗码", text: $password)
 .font(.system(size: 20, weight: .semibold))
 .padding(.horizontal)

暗码二次确认输入框也是同样是SecureField暗码输入框，为了隔开内容，输入框都能够运用Divider分割线分开，这样美观一些。

//分割线
Divider()
 .frame(height: 1)
 .background(Color(red: 240/255, green: 240/255, blue: 240/255))
 .padding(.horizontal)

最后是注册按钮，按照之前的章节，咱们放一个简单的按钮。

//注册按钮
Button(action: {
    }) {
 Text("注册")
  .font(.system(.body, design: .rounded))
  .foregroundColor(.white)
  .bold()
  .padding()
  .frame(minWidth: 0, maxWidth: .infinity)
  .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
  .cornerRadius(10)
  .padding(.horizontal)
 }

咱们准备好这些元素后，将他们用VStack纵向排布在一同。

代码优化

咱们发现，相同的代码太多了，这不够优雅。

哪怕是做任何项目，咱们编程都力求优雅。咱们能够把相同的内容抽离出来，除了款式外，咱们发现TextField输入框和SecureField暗码输入框除了类型不相同，其他都是相同的。

那么咱们能够经过一个判别来抽离主体内容。

//注册视图
struct RegistrationView:View {
var isTextField = false
var fieldName = ""
@Binding var fieldValue: String
var body: some View {
VStack {
//判别是不是输入框
if isTextField {
//输入框
TextField(fieldName, text: $fieldValue)
     .font(.system(size: 20, weight: .semibold))
.padding(.horizontal)
} else {
//暗码输入框
SecureField(fieldName, text: $fieldValue)
.font(.system(size: 20, weight: .semibold))
 .padding(.horizontal)
}
//分割线
Divider()
.frame(height: 1)
.background(Color(red: 240/255, green: 240/255, blue: 240/255))
.padding(.horizontal)
}
}
}

然后，咱们只需求在ContentView主视图中引证并绑定就完结了页面规划。

RegistrationView(isTextField: true, fieldName: "用户名", fieldValue: $username)
RegistrationView(isTextField: false, fieldName: "暗码", fieldValue: $password)
RegistrationView(isTextField: false, fieldName: "再次输入暗码", fieldValue: $passwordConfirm)

报错信息制作

然后，咱们来实现了报错信息提醒。

同理，咱们也把相同元素抽离出来，咱们能够看到假如校验不经过，它会展现一个Image图标和错误信息Text文字，逻辑咱们先放一边，完结页面。

//错误信息
struct InputErrorView:View {
var iconName = ""
var text = ""
var body: some View {
HStack {
Image(systemName: iconName)
.foregroundColor(Color(red: 251/255, green: 128/255, blue: 128/255))
Text(text)
.font(.system(.body, design: .rounded))
.foregroundColor(Color(red: 251/255, green: 128/255, blue: 128/255))
Spacer()
}.padding(.leading,10)
}
}

然后在ContentView主视图中引证并绑定，作用如下：

祝贺你，完结了本章页面的规划编程。

由于这一章的内容有点多，那么咱们也将分章节写完，不要着急。

下一章，咱们将基于这个注册登录页面学习Combine异步编程结构的运用。

完整代码

import SwiftUI
struct ContentView: View {
@State private var username = ""
@State private var password = ""
@State private var passwordConfirm = ""
var body: some View {
VStack (alignment: .leading, spacing: 40) {
//用户名
VStack {
RegistrationView(isTextField: true, fieldName: "用户名", fieldValue: $username)
InputErrorView(iconName: "exclamationmark.circle.fill", text: "用户不存在")
}
//暗码
VStack{
RegistrationView(isTextField: false, fieldName: "暗码", fieldValue: $password)
InputErrorView(iconName: "exclamationmark.circle.fill", text: "暗码不正确")
}
//再次输入暗码
VStack {
RegistrationView(isTextField: false, fieldName: "再次输入暗码", fieldValue: $passwordConfirm)
InputErrorView(iconName: "exclamationmark.circle.fill", text: "两次暗码需求相同")
}
//注册按钮
Button(action: {
}) {
Text("注册")
.font(.system(.body, design: .rounded))
.foregroundColor(.white)
.bold()
.padding()
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(10)
.padding(.horizontal)
}
}.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//注册视图
struct RegistrationView:View {
var isTextField = false
var fieldName = ""
@Binding var fieldValue: String
var body: some View {
VStack {
//判别是不是输入框
if isTextField {
//输入框
TextField(fieldName, text: $fieldValue)
.font(.system(size: 20, weight: .semibold))
.padding(.horizontal)
} else {
//暗码输入框
SecureField(fieldName, text: $fieldValue)
.font(.system(size: 20, weight: .semibold))
.padding(.horizontal)
}
//分割线
Divider()
.frame(height: 1)
.background(Color(red: 240/255, green: 240/255, blue: 240/255))
.padding(.horizontal)
}
}
}
//错误判别
struct InputErrorView:View {
var iconName = ""
var text = ""
var body: some View {
HStack {
Image(systemName: iconName)
.foregroundColor(Color(red: 251/255, green: 128/255, blue: 128/255))
Text(text)
.font(.system(.body, design: .rounded))
.foregroundColor(Color(red: 251/255, green: 128/255, blue: 128/255))
Spacer()
}.padding(.leading,10)
}
}

快来动手试试吧！

假如本专栏对你有协助，无妨点赞、谈论、关注～