iOS开发--Swift：布局库——SnapKit

如果你是只从事过iOS开发，觉得使用SnapKit（OC中的Masonry）很方便，甚至xib拖拉也不错。

可以说，这些都是iOS开发稀疏平常的日常。

但一旦你学过Flutter/Vue写过UI组件，那么iOS的UI编写真的是有种不忍直视的感觉，可以说是原始社会。

虽然隔壁Android的UI写起来也不会特别友好，但是还是比iOS好。

为啥，因为其他的UI编写基本上都可以既见既所得了，就算犯了错，边看边边调试就行了

只有iOS的需要编译调试。。。编译调试。。。编译调试。。。

而且其他家的UI编写基本上都是一脉相承，前端里面的CSS，在Flutter中可以找到一些命名相同的组件，我们来举个例子来说明一下隔壁构建UI的简单和同化：

下面这个UI如何Flutter、H5、iOS来实现：

如果你正在面试，或者正准备跳槽，不妨看看我精心总结的面试资料：https://gitee.com/Mcci7/i-oser 来获取一份详细的大厂面试资料 为你的跳槽加薪多一份保障

Flutter:

Wrap(
  children: model.children
      .map(
        (topic) => Padding(
          padding: EdgeInsets.all(3.0),
          child: Chip(
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            key: ValueKey<String>(topic.name),
            backgroundColor: _getChipBgColor(topic.name),
            label: Text(
              topic.name,
              style: TextStyle(fontSize: 14.0),
            ),
          ),
        ),
      )
      .toList(),
);

H5：

<view class="flex-wrap" v-for="(item, index) in list" :key="index">
    <u-tag :text="item.name" :index="item.name" @click="click" />
</view>

<style scoped lang="scss">
.flex-wrap {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    margin: 16rpx;
}
</style>

iOS:

我需要的代码太多了，这里就贴出来了 T_T

Flutter和H5都是用的wrap作为布局思路，Flutter有wrap组件，而H5直接用flex-wrap的CSS就可以了，而iOS中却没有，虽说很多iOS中的组件Flutter和H5需要自定义，而iOS开箱即用。

不过现在这个情况是，就算设计稿与UI元素都和iOS靠拢，但实际上Flutter和H5在组件上已经有非常成熟的官方组件或者第三方，而iOS却没有。。。加上没有热重载。。。

不过虽然说iOS的布局不好用，甚至不好使，但是SnapKit至少给你一点点曙光，此话怎讲，下面我们来看看同一个布局，使用iOS原生的布局和SnapKit的布局代码量吧。

iOS原生布局 VS SnapKit布局

ios原生布局：

contentView.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false

addConstraint(NSLayoutConstraint(item: imageView,
                                 attribute: .leading,