0
点赞
收藏
分享

微信扫一扫

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

项目背景

有一天​​UI​​​跑过来指着​​App页面​​说:

你看两个同样的按钮,这一个按钮线段和第二个按钮线段为什么会不一样?

翻查代码后才看到,原来复制样式代码的时候少复制了一行,有点尴尬。

经过这次事情我​​假装反思​​​了一下,是不是应该和​​UI设计​​​一样,有一些在系统中​​统一的样式​​应该要建立一个统一的样式库,这样就不用每次复制那么多样式代码了?

说干就干。

项目搭建

首先,创建一个新的​​SwiftUI​​​项目,命名为​​SwiftUIStyleSheet​​。

每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧_背景颜色

基础样式

我们先来看看基础的样式是如何设计的,我们先来做一个简单的​​文字按钮​​,示例:

struct ContentView: View {
var body: some View {
Text("文如秋雨")
.font(.system(size: 17))
.foregroundColor(.white)
.padding()
.background(Color.blue)
.clipShape(Capsule())
}
}

每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧_修饰符_02

上述代码中,我们可以看到文字按钮的常见修饰符:​​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建立统一的样式规范吧_修饰符_03

如果我们要更加优雅点,想要像修饰符一样调用​​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建立统一的样式规范吧_swift_04

当我们应用内不同的页面使用同一个按钮样式时,我们如果要统一修改样式,就只需要修改​​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)
}
}

每次都要写一堆样式代码?试试ViewModifier建立统一的样式规范吧_背景颜色_05

恭喜你,完成了本章的全部内容!

快来动手试试吧。

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

举报

相关推荐

0 条评论