SwiftUI-CSS样式系统探索

样式系统指的是对 UI 设计视觉规范中，提炼出来的一些规范。如项目的整体色调及字体、字号

样式系统 对 App 开发存在的意义

1. 当UI设计师出具完项目的整体UI视觉规范之后，开发通过提炼样式系统，对整体视觉有更好的全局掌握。 对于UI设计师，梳理视觉规范，定义哪些是通用规则，哪些是个性规则，哪些是基础规则，以及如何对基础规则进行运算；开发提供样式接口时，需要在实现视觉要求的基础上，还能够保证扩展性和易读性。在对视觉规范有深入理解之后，设计出来的视觉规范会更有用，更健壮。

2. 在日常工作中，快速实现效果是非常重要的，希望我们的样式：

• 可复用。如果视觉稿是按照原有规范实现的，那么新需求里的页面，也可以使用已有的样式来快速搭建，就像搭积木一样。

• 易维护。而且实际工作中，在某个具体页面迭代最多的恐怕就是视觉优化了。如果使用的样式系统，在处理：二行变三行、按钮右上角加个图标、整个文字描述块整体向右移动等等需求变化时，如果能够快速实现，而不是需要结构大改（这样容易改出新问题），那么说明样式系统和 UI 接口划分是面向需求变化的。能够应付大部分（需求增改，就是个设计良好的组件。

iOS 开发里的样式系统

Cocoa touch 并没有提供样式系统的语法，一般可能会自己封装一层，大部分封装都比较简单。比方说只对 App 里的按钮封装了工厂类；或者只对 Label 设置字号、字体、颜色做了封装，没有形成进一步封装形成样式系统。 原因在于Cocoa touch 设计之初就没有考虑用对象来表示一组属性，没有设计样式系统的概念，导致在封装实现样式系统时比较困难。

SwiftUI-CSS

• SwiftUI把描述性界面开发体验带到 iOS，它的函数式语法和属性对象方式，使得可以用Swift-CSS 来实现 SwiftUI 里样式系统。

SwiftUI 里的链式语法，是函数式函数调用的体现。SwiftUI 实体分为 View 和 ContentModifier。Text("g_kumar") 负责视图结构；.font(.title) 添加属性样式

Text("g_kumar")
      .bold()
      .font(.title)
Text("Notifications: (self.profile.prefersNotifications ? "On": "Off" )")
Text("Seasonal Photos: (self.profile.seasonalPhoto.rawValue)")
Text("Goal Date: (self.profile.goalDate, formatter: Self.goalFormat)")

• 样式封装。CSSStyle 对象来封装样式对象，然后通过 addClassName 这个 modifier 来将样式插入函数运算中，和其他事件、通知、样式（.frame .resizable）一起无缝协作。

// without SwiftUI-CSS
Image("image-swift")
                 .resizable()
                 .scaledToFit()
                 .frame(100, height:100)
                 .cornerRadius(10)
                 .padding(EdgeInsets(top: 10, leading: 0, bottom: 15, trailing: 0))
// with SwiftUI-CSS
let languageLogo_clsName = CSSStyle([
    .width(100),
    .height(100),
    .cornerRadius(10),
    .paddingTLBT(10, 0, 15,0)
])
Image("image-swift")
        .resizable()
        .scaledToFit()
        .addClassName(languageLogo_clsName)

其中，languageLogo_clsName就是 logo 的样式名，在页面其他 logo，可以直接复用这个样式。