在SwiftUI中使用Buider模式创建复杂组件

本文主要是介绍在SwiftUI中使用Buider模式创建复杂组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在SwiftUI中使用Buider模式创建复杂组件

我们在前面的博客闲聊SwiftUI中的自定义组件中聊到了如何在SwiftU中创建自定义组件。
在那里，我们创建了一个非常简单的组件RedBox，它将展示内容增加一个红色的边框。 RedBox非常简单，我们用普通的方法创建就可以了。但如果组件结构比较复杂，控制参数比较多时，用普通方法创建就比较繁琐，而且容易出错。这时就要用到Builder模式了。

在这篇博文中，我们聊聊如何使用Builder模式创建复杂组件，并针对自定义组件的这个特定场景，对Builder模式做一些小小的改进。

这里的复杂指的是组件的构成参数非常多，而不是组件的实现逻辑有多么复杂，后者不是我们关注的问题。如果一个组件有多于四个的参数或者少于四个参数，但至少有两个闭包参数那么它就是一个复杂组件。（作者个人观点）

为了说明我们的思路。我们设计了一个TitleBox组件，该组件并不复杂，只有两个配置参数，标题和和显示内容。TitleBox 显示带有标题的内容。我们先用普通方法创建该组件：

struct TitleBox<Content:View> :View
{var  title : String  = "" var content:  ()->Content var body:some View {VStack  {Text(self.title).bold().font(.title).padding()Divider()ZStack{self.content()}.padding()Spacer()}.border(Color.gray.opacity(0.3),width:2).padding()}}

因为TitleBox是一个简单组件，所以普通方式已经足够方便了。不过为了说明Builder模式的思路，我们还是为TitleBox组件增加Builder模式。按照Buider模式，我们需要创建一个类：TitleBoxBuilder，用来收集TitleBox的配置参数，并在其build()方法中返回TitleBox对象：

class TitleBoxBuilder<Content:View>  {var title :  String = "" var content: (()->Content )!init() {} func setTitle( _ title : String )->Self{self.title = title return self   }func setContent  ( _ content: @escaping ()->Content   )->Self {self.content  = content  return self   }func build()->TitleBox<Content> {//参数有效性检查...略return TitleBox<Content>(title:title,content:content )}}//使用TitleBoxBuilder
TitleBoxBuilder().setTitle("TitlBoxBuilder：文字内容").setContent{Text("春眠不觉晓，处处闻啼鸟，夜来风雨声, 花落知多少")}.build()

观察上面代码，我们使用了类而不是结构体来记录TitleBox的参数信息，这个是Builder模式的一个显著特点，另外，我们为该类定义了无参数的构造函数，目的是使用此无参数方式快速构造Builder对象。目前build() 方法简单返回了TitleBox对象。实际过程中，该方法还应包括大量的检查逻辑，避免漏输参数或者输入错误的参数，确保最终对象的完整性和正确性。

除了直接构造TitleBoxBuilder，也可以在TitleBox组件中增加一个静态方法 builder() 或者类似的方法如getBuidler() 之类，返回 TitleBoxBuilder。如下：

   ...static func builder()->TitleBoxBuilder<Content>{return TitleBoxBuilder<Content>()}...//使用TitleBoxBuilder
TitleBox.builder() .setTitle("TitlBoxBuilder：文字内容").setContent{Text("春眠不觉晓，处处闻啼鸟，夜来风雨声, 花落知多少")}.build()

上面就是正常的Builder模式的构造思路,正常情况下已经够了。

不用仔细观察就可以发现，增加了TitleBoxBuilder后，首先我们有了两个对象（Build模式要求)，TitleBox和TitleBoxBuilder, 这两个对象大部分信息都是相同的，有没有改进余地呢？

答案是有的。

对于自定义组件这个特定场景，由于组件都是我们自己的代码，改进不仅有，而且比较大，也可能出乎你的意料。

改进思路是：合并TitleBox和TitleBoxBuilder,将TitleBox完全去掉，
让TitleBoxBuilder走到前台，直接担负起组件的责任。只需要将 TitleBox的组件body中的逻辑直接在TitleBoxBuilder的build()方法中实现。

为了去掉Buider模式的痕迹，将TitleBoxBuilder重命名为TitleBox,将其build()方法重新命名为asView()以进一步加强语义。下面是改进后的代码，新的组件名称是TitleBoxA。

//定义组件
class TitleBoxA<Content:View>  {var title :  String = "" var content: (()->Content )!init() {} func setTitle( _ title : String )->Self{self.title = title return self   }func setContent  ( _ content: @escaping ()->Content   )->Self {self.content  = content  return self   }func asView()->some View {VStack  {Text(self.title).bold().font(.title).padding()Divider()ZStack{self.content()}.padding()Spacer()}.border(Color.gray.opacity(0.3),width:2).padding()}//使用组件
TitleBoxA().setTitle("TitleLayout：文字内容").setContent{Text("春眠不觉晓，处处闻啼鸟，夜来风雨声, 花落知多少")}.asView() 
}

新代码是不是简单了好多呢！下面是一个更复杂的例子。这个例子创建一个MainBox组件，该组件有四个参数：header，footer，left和right，其中header和footer是String类型，left和right是需要装配的视图，显示效果如下：在这里插入图片描述

下面是代码：

//定义组件
class MainBox<LEFT:View,RIGHT:View>  {var header :  String = "" var footer :  String = "" var left: (()->LEFT )!var right: (()->RIGHT )!init() {} func setHeader ( _ header : String )->Self{self.header = header return self   }func setFooter( _ footer : String )->Self{self.footer  = footer  return self   }func setLeft   ( _ left: @escaping ()->LEFT    )->Self {self.left  = left   return self   }func setRight ( _ right: @escaping ()->RIGHT )->Self {self.right   = right   return self   }func asView()->some View {VStack  {Text(self.header).bold().font(.title).padding()Divider()HStack{    self.left()Divider()self.right()}.padding(.horizontal)Divider()Text(self.footer).font(.footnote).padding()}.border(Color.gray.opacity(0.3),width:2).padding()}}//使用组件
MainBox().setHeader("这里是标题").setFooter("this is footer").setLeft {Text("春眠不觉晓，处处闻啼鸟，夜来风雨声, 花落知多少")}.setRight {HStack{Image(systemName: "heart").resizable().scaledToFit().foregroundStyle(Color.red).frame(width:50,height:50)Image(systemName: "cloud.heavyrain").resizable().scaledToFit().foregroundStyle(Color.green).frame(width:50,height:50 )}}.asView()