每次都要写一堆样式代码？试试ViewModifier建立统一的样式规范吧

---

theme: smartblue

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情。

项目背景

有一天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视图，示例：

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)     } }

恭喜你，完成了本章的全部内容！

快来动手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～