在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()

读者可以通过该复杂示例进一步体会上述方法的便利性。