Have to write a bunch of style code every time? Try ViewModifier to create a unified style specification

Work together to create and grow together! This is the 30th day of my participation in the "Nuggets Daily New Plan · August Update Challenge", click to view the details of the event .

Background of the project

One day UIhe ran over and pointed and App页面said:

You look at two identical buttons, why is the line segment of this button different from the line segment of the second button?

After I checked the code, I saw that when I copied the style code, I copied one line less, which is a bit embarrassing.

After this incident, I 假装反思took a look. Should it be the UI设计same as that, there 统一的样式should be a unified style library in the system, so that there is no need to copy so many style codes every time?

Just do it.

Project construction

First, create a new SwiftUIproject named SwiftUIStyleSheet.

basic style

Let's first take a look at how the basic style is designed, let's do a simple 文字按钮example:

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

In the above code, we can see common modifiers for text buttons: fontfont modifier, foregroundColorfont color modifier, paddingmargin modifier, backgroundbackground color modifier, clipShapeshape drawing modifier.

view decorator

If Appall of the main buttons in this style use this style, we can extract the modifier part and build a ViewModifierview modifier. The code structure is as follows:

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
           //修饰符
    }
}
复制代码

In the above code, we extract the original Textmodifier for the text button and build it into a new view modifier MainTitle, our text button modifier will be modified content, for example:

struct MainTitle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17))
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(Capsule())
    }
}
复制代码

When we want to use, we just need to call modifierthe modifier, example:

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .modifier(MainTitle())
    }
}
复制代码

If we want to be more elegant and want to call the view modifier like a modifier, we ViewModifiercan also do something 拓展, for example:

extension View {
    func mainTitle() -> some View {
        self.modifier(MainTitle())
    }
}
复制代码

In this way, when we Textadd modifiers, we can use the mainTitleview directly, for example:

struct ContentView: View {
    var body: some View {
        Text("文如秋雨")
            .mainTitle()
    }
}
复制代码

modifier action

Maybe one button can't see the effect, let's create one more button to see:

struct ContentView: View {
    var body: some View {
        VStack(spacing:15){
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
            Text("文如秋雨")
                .mainTitle()
        }
    }
}
复制代码

When different pages in our application use the same button style, if we want to modify the style uniformly, we only need to modify the ViewModifierview decorator, for example:

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)
    }
}
复制代码

Congratulations, you have completed the entire content of this chapter!

Come and try it.

If this column is helpful to you, please like, comment, and follow~