每次都要写一堆样式代码？试试ViewModifier建立统一的样式规范吧
项目背景
有一天UI跑过来指着App页面说：
你看两个同样的按钮，这一个按钮线段和第二个按钮线段为什么会不一样？
翻查代码后才看到，原来复制样式代码的时候少复制了一行，有点尴尬。
经过这次事情我假装反思了一下，是不是应该和UI设计一样，有一些在系统中统一的样式应该要建立一个统一的样式库，这样就不用每次复制那么多样式代码了？
说干就干。
项目搭建
首先，创建一个新的SwiftUI项目，命名为SwiftUIStyleSheet。
基础样式
我们先来看看基础的样式是如何设计的，我们先来做一个简单的文字按钮，示例：
struct ContentView: View { var body: some View { Text("文如秋雨") .font(.system(size: 17)) .foregroundColor(.white) .padding() .background(Color.blue) .clipShape(Capsule()) } }
上述代码中，我们可以看到文字按钮的常见修饰符：font字体修饰符、foregroundColor字体颜色修饰符、padding边距修饰符、background背景颜色修饰符、clipShape形状绘制修饰符。
视图修饰器
如果App中的主要按钮都使用这种样式，我们就可以把修饰符部分抽离出来，构建一个ViewModifier视图修饰器。代码结构如下：
struct MainTitle: ViewModifier { func body(content: Content) -> some View { content //修饰符 } }
上述代码中，我们将原来给Text文字按钮的修饰符抽离构建成一个新的视图修饰器MainTitle，我们的文字按钮修饰符将修饰content，示例：
struct MainTitle: ViewModifier { func body(content: Content) -> some View { content .font(.system(size: 17)) .foregroundColor(.white) .padding() .background(Color.blue) .clipShape(Capsule()) } }
当我们要使用时，只需要调用modifier修饰符，示例：
struct ContentView: View { var body: some View { Text("文如秋雨") .modifier(MainTitle()) } }
如果我们要更加优雅点，想要像修饰符一样调用ViewModifier视图修饰器，也可以做一些拓展，示例：
extension View { func mainTitle() -> some View { self.modifier(MainTitle()) } } 这样我们给Text添加修饰符时，就可以直接使用mainTitle视图，示例： css 复制代码 struct ContentView: View { var body: some View { Text("文如秋雨") .mainTitle() } }
修饰器作用
可能一个按钮看不出效果，我们建立多一个按钮看看：
struct ContentView: View { var body: some View { VStack(spacing:15){ Text("文如秋雨") .mainTitle() Text("文如秋雨") .mainTitle() Text("文如秋雨") .mainTitle() Text("文如秋雨") .mainTitle() } } }
当我们应用内不同的页面使用同一个按钮样式时，我们如果要统一修改样式，就只需要修改ViewModifier视图修饰器，示例：
struct MainTitle: ViewModifier { func body(content: Content) -> some View { content .frame(maxWidth:.infinity) .font(.system(size: 17)) .foregroundColor(.white) .padding() .background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing)) .cornerRadius(8) .padding(.horizontal) } }
恭喜你，完成了本章的全部内容！
快来动手试试吧。
