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

携手创作，共同成长！这是我参与「掘金日新计划 · 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)
    }
}
复制代码

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

快来动手试试吧。

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