货拉拉用户端SwiftUI踩坑之旅

1. 前言

在货拉拉用户端适配灵动岛开发过程中，切身感受到了SwiftUI编写界面带来的便捷性，像声明式UI能减少许多初始化代码、更简便更灵活的Flex布局，以及所有iOSer都梦寐以求的Hot Reload功能，都是能大幅度提升编码体验与效率的功能。基于这些优点，对SwiftUI落地进行探索，在项目内找一个页面，使用SwiftUI编写接入，尝试新技术对编码效率的提升感受，以及体验SwiftUI与OC项目的兼容程度，为后续技术选型提供实践经验。本文记录接入过程中一些"坑"与经验，在此与大家分享下这趟踩坑之旅。

另外想了解货拉拉用户iOS端接入灵动岛实践经验的，可以移步这篇文章 货拉拉用户 iOS 端灵动岛实践总结 。

2. 接入实践

接入SwiftUI条件

SwiftUI文件支持的最低系统是iOS13。如果工程最低支持版本在iOS13以下但又想接入，可以使用系统版本判断@available(iOS 13.0, *)，在iOS13以下使用常规的UIKit视图，iOS13使用SwiftUI视图。

2.1 创建swiftUI文件

New File -> User Interface -> SwiftUI View创建一个SwiftUI视图文件，如果是纯OC项目，需要创建Swift的桥接文件，如果工程是OC/Swift混编，则不需要再次创建。

也可以创建一个普通的Swift文件，导入头文件 SwiftUI，手动编写SwiftUI视图。

swift 复制代码

import SwiftUI

public struct SwiftUIView: View {
    public var body: some View {
        Text("SwiftUI")
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

PreviewProvider为实时预览功能，可以根据项目实际情况选择使不使用。

2.2 OC调用SwiftUI视图

OC无法直接使用SwiftUI视图，但是可以通过UIHostingController控制器包裹SwiftUI视图，然后通过push或present等方式打开ViewController，此时打开ViewController中的view则为SwiftUI视图。

由于OC与Swift的访问控制，所以在SwiftUI文件和OC中间需要增加一道Swift的桥接。

swift 复制代码

// 桥接
@objc
public class HDSwiftUIBridg: NSObject {
    @objc public func makeStudyView() -> UIViewController { 
        let vc = UIHostingController(rootView: HDSwiftUIView())
        return vc
    }
}
// SwiftUI
struct HDSwiftUIView:View {
    var body: some View {
        Text("SwiftUI")
    }
}

// OC
@ implementation HDHomeVC
    - (void)buttonClick {
       UIViewController *vc = [[HDSwiftUIBridg new] makeStudyView];
       [self.navigationController pushViewController:vc animated:YES];
    }
@end

2.3 OC模型传递

先在SwiftUI视图中增加属性变量，SwiftUI中就可以直接访问模型属性。属性变量写完以后，在初始化SwiftUI类时，构建方法就会自动增加相应的入参。

swift 复制代码

// SwiftUI
struct HDSwiftUIView:View {

    var model: HDTimeModel
    
    var body: some View {
        Text(model.name ?? "")
    }
}

// 桥接
@objc
public class HDSwiftUIBridg: NSObject {
    @objc public func makeStudyView(model:HDTimeModel) -> UIViewController { 
        let vc = UIHostingController(rootView: HDSwiftUIView(model: model))
        return vc
    }
}

// OC
@ implementation HDHomeVC 
    - (void)buttonClick {
       HDTimeModel *model = [HDTimeModel new];
       UIViewController *vc = [[HDSwiftUIBridg new] makeStudyViewWithModel:model];
       [self.navigationController pushViewController:vc animated:YES];
    }
@end

2.4 使用UIKit视图

由于存在业务场景特殊性的限制，现阶段可能存在需要使用UIKit的视图，比如使用lottie，或者视图与业务已经深绑定，使用SwiftUI重写周期长，这些问题都会影响选用SwiftUI的意愿。

官方早也帮我们想好解决办法。只需要用到 UIViewRepresentable 协议，通过这个协议就可以将UIKit的视图桥接到SwiftUI上。

需要实现两个协议方法，分别是初始化和与更新视图。示例中在创建视图之前已经获取到了数据，并且数据不会动态更改，则在初始化视图的时候就可以直接将数据传入，而不是通过 updateUIView 。

协议内还有许多实用方法，感兴趣的可以自行探索。

scss 复制代码

protocol UIViewRepresentable
@MainActor func makeUIView(context: Self.Context) -> Self.UIViewType
@MainActor func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)
....
@end

示例：

swift 复制代码

// View 桥接
struct HDBridgeViewWrapper: UIViewRepresentable {
    var model:HDUIDataModel
    func makeUIView(context: Context) -> some UIView {
        let view = HDOCViewCell()
        view.reload(model)
        return view
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

// SwiftUI
@available(iOS 13.0, *)
public struct SwiftUIView: View {
    public var body: some View {
        List {
          ForEach(model.list, id: .self) { obj in
               HDBridgeViewWrapper(model: obj)
                    .frame(maxWidth: .infinity, minHeight: 58 ,maxHeight: 58)
                    .listRowBackground(Color.clear)
                    .listRowInsets(.none)
          }
        }
    }
}

// UIKit
@implementation HDOCViewCell
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
    
    }
    return self;
}
@end

2.5 点击事件传递

虽然SwiftUI更推荐响应式编程，但目前iOS主流的编码模式还是面向对象式编程，所以视图虽然是使用SwfitUI编写，动作事件还是不可避免存在大量与原逻辑的交互，而想从SwiftUI视图的点击透传到OC&Swift的逻辑层上，通过iOSer最熟悉的Block即可轻松实现。

实现方式与数据传参一致，在SwiftUI属性中增加闭包属性，初始化方法中同样也会自动增加入参，在桥接文件与OC交互的方法内手动增加闭包入参，就可以实现点击事件的回传。

less 复制代码

@available(iOS 13.0, *)
@objc public class HDSwiftUIBridg: NSObject {
    @objc public func makeStudyView(callBack: @escaping() -> Void) -> UIViewController {
        let vc = UIHostingController(rootView: SwiftUIView(model: model, closeCallBack: {
            callBack()
        }))
        return vc
    }
}

@available(iOS 13.0, *)
public struct SwiftUIView: View {
    
    var model: HLLUCardInfoModel
    var closeCallBack:(()->Void)?
    
    public var body: some View {
        VStack {
            Button(action: {
               closeCallBack?()
            }) {
               Text(model.shopName ?? "")
            }
        }
    }
}

implementation HDHomeVC
    - (void)buttonClick {
       HDDataModel *model = [HDDataModel new];
       UIViewController *vc = [[HDSwiftUIBridg new] makeStudyViewWithModel:model callBack: {
           //原逻辑
       }];
       [self.navigationController pushViewController:vc animated:YES];
    }
@end

完成上述代码后，SwiftUI编写的视图已经能够在项目中正确展示出来了。现在可以开始着手在SwiftUI上编写UI代码，尝试下编写UI最便利的功能------HotReload。相信在语法熟练后，一定能带来比现在更好的编码体验。

3. 踩坑记录与解决

在实践中遇到了一些比较有意思的问题，换一种思路就很好的解决。在此记录一下，与大家分享，如果大家还有更优雅的解决办法，欢迎讨论交流。

无法使用PreviewProvider实时预览功能

这个问题出现原因不明，在新建的空白工程，能正常运行预览功能，在项目内就无法使用，也没有具体的报错原因，经过多种尝试，最终得到能临时解决的方法。

如果你的项目也是使用CocoaPods管理的单仓多组件工程，先把SwiftUI移到主目录下，与AppDelegate同级。再次尝试运行预览功能，如果不成功则进行第2步设置。
导航栏 -> Editor -> Canvas -> Automatically Refresh Canvas取消勾选。再次尝试运行预览功能，我们是在这一步成功运行了实时预览功能，如果还是不行可以进行下面的一下尝试。
如果是M1电脑，可能会出现 xxx.frameworks not supported x86_64 ，这时候可以在预览的界面左下角，进行模拟器切换(arm64&x86_64都分别尝试，我们项目是使用x86_64的模拟器运行起来的)。
也可以使用真机进行预览功能，如果在真机上出现了Xcode Previews这个APP，但是项目无法运行起来，在这个时候可以切回使用模拟器再次尝试第3步。

需要注意的是只需要把PreviewProvider写在主目录(壳工程)下，而SwiftUI视图要放在子Pod内，因为主工程能索引子组件的Swift文件，如果把视图也放在主目录下，子组件内就无法访问到View。

SwiftUI主视图的frame与背景色设置不生效

可以在桥接文件内，获取到视图后设置

swift 复制代码

@objc
public class HDSwiftUIBridg: NSObject {
    @objc public func makeStudyView(model:HDTimeModel) -> UIViewController { 
        let vc = UIHostingController(rootView: HDSwiftUIView(model: model))
        vc.view.frame = .init(x: 0, y: 0, width: 300, height: 300)
        vc.view.backgroundColor = .white
        return vc
    }
}

SwiftUI视图支持不足
- 像Scroll的禁止滑动、list隐藏分割线等，部分需要到iOS15+系统才可以支持，这些属性或者功能随着SwiftUI的迭代会有解决办法，但在低版本实现起来非常复杂，如果想简单实现这些功能可以使用UIKit的视图，通过桥接的方式供SwiftUI使用。

圆角与边框同时设置圆角无法处边框消失

css 复制代码

  struct SwiftUIView: View {
      var body: some View {
          Text("Hello, SwiftUI!")
                      .padding()
                      .border(Color.blue, width: 1)
                      .cornerRadius(40)
      }
  }

可以使用overlay，需要注意的是这个属性最低支持的系统版本是iOS15。

less 复制代码

struct SwiftUIView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 40, style: .continuous)
                            .stroke(.blue,lineWidth: 1.0)
                    )
    }
}

容易遗漏桥接文件强引用
- 桥接文件是一个NSObject类，通过桥接类获取持有SwiftUI的ViewController，容易遗漏在当前类强持有桥接文件，会导致传入的block释放，导致回调无响应。

只使用SwiftUI视图

因为桥接类UIHostingController是UIViewController，正常是获取到viewController进行Push，如果只想用view可以通过viewController.view获取视图。

swift 复制代码

  @objc
  public class HDSwiftUIBridg: NSObject {
      @objc public func makeStudyView(model:HDTimeModel) -> UIView { 
          let vc = UIHostingController(rootView: HDSwiftUIView(model: model))
          return vc.view
      }
  }

数据模型双向绑定不支持OC模型
- SwifUI采用声明式的布局方式，语言设计上更契合响应式编程，许多Demo都是用模型视图双向绑定的来实现属于与数据的更新，但在使用到OC模型时，双向绑定的关键字不支持在OC上编写，导致无法让视图与模型绑定。
- 可以参考示例，直接将模型传入，按面向对象编程设计进行编码。

4. 总结

在编码上OC/Swift/SwiftUI混编总体非常丝滑，接入SwiftUI的编码体验与当年OC接入Swift非常类似，通过系统提供的API就能很轻易实现SwiftUI的接入。在业务层上，由于需要考虑最低系统版本的支持、业务的复杂性、UI的高还原性等业务问题，导致SwiftU在业务开发体验上暂时还是不如OC&Swift开发。但是随着官方的力推、系统版本的更新，SwiftU的缺点会逐步解决，使用SwiftUI的编码体验与效率也会直线上升，总的来说现有项目接入SwiftUI从技术层面上是没问题的，在业务上可以考虑渐进的去尝试，相信能给大家带来不一样的编码体验。

我们希望通过分享开发过程中遇到的问题和解决方案，可以帮助到更多的人。如果你有任何问题或者想法，欢迎在评论区留言。期待我们在技术的道路上再次相遇。