每次都要写一堆样式代码？试试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)
}
}

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

快来着手试试吧。

假如本专栏对你有协助，无妨点赞、评论、关注～