Make writing a habit together! This is the sixth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Preface:

One of the things I really want to do this year, and a very important goal, is to build my knowledge system. Most of the time, we will find themselves will be a lot of things, but very miscellaneous, clearly know, but it is difficult to let others know. It is not hard to find that many good developers can form a systematic knowledge base of their skills, which is really admirable and worth learning.

Stay hungry. Stay foolish.

In this chapter, you’ll learn how to work with reusable blocks of code.

In the pricing scheme view, you can see that the styles and code of the three pricing schemes are very similar.

The logic of the code, like the logic of the design, is to “copy” the code from the view of the first pricing plan, then change the color, font, or add more text.

But their main structure is the same.

So can we just write the code once, and then re-define the text and so on.

This greatly reduces the amount of code and makes the code easier to read, achieving the goal of “writing code elegantly”.

Struct pricingView: View {var body: ZStack {VStack {Text(" VStack ").fontweight (.bold).font(.system(size: 17)) .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: Font (.system(size: 30)). ForegroundColor (Color(red: 239/255, green: 24)) Text(" 30 ").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: 239/255, green: 24) 129 / 255, blue: 112 / 255)) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90) .padding(20) .background(Color("faf7f3")) .overlay(RoundedRectangle(cornerRadius: 6) .stroke(Color(red: 202/255, green: 169/255, Blue: 106/255), lineWidth: 2)) // 14)) .fontWeight(.bold) .foregroundColor(.white) .padding(5) .background(Color(red: 202 / 255, green: 169 / 255, blue: // VStack {Text(" 新 ").fontweight (.bold).font(.system(size: 17)) .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: Font (.system(size: 30)). ForegroundColor (Color(red: 239/255, green: 30)) Text(" 30").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: 239/255, green: 30) 129 / 255, blue: 112 / 255)) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90) .padding(20) .background(Color(red: 244 / 255, green: 244 / 255, blue: Font (.system(size: 30)).fontweight (.bold).font(.system(size: 30)). 17)) .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: Font (.system(size: 30)).foregroundcolor (Color(red: 239/255, green: green) Text("¥228").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: 239/255, green: green) Font (.system(size: 17)). ForegroundColor (Color(red: 24)) Text("¥19.00/月").fontweight (.bold).font(.system(size: 17)).foregroundcolor (Color(red: 24) 190 / 255, green: 188 / 255, blue: 184 / 255)) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90) .padding(20) .background(Color(red: 244 / 255, green: 244 / 255, blue: CornerRadius (10)} // HStack end position.padding(.horizontal)}}Copy the code

Just do it!

First, look at the similarities in the code.

Under Text(), set the Text weight, font, and font color. Under the entire VStack, set the size, margins, background color, and rounded edges.

We found that the pricing plans are the same except for different titles (continuous monthly, 1 month, 12 months), different prices (¥18, ¥30, ¥228) and different background colors.

Now that these are reusable, we can isolate the reusable parameters.

By defining a variable and setting different values in the code, you can achieve full reuse.

I’m going to define a standard pricing scheme, and I’m going to define a title variable, which is a string, and I’m going to define a price variable, which is a string, and I’m going to define a background color, which is a color.

Then change the defined variables into the code below.

Struct pricingView: View {var title: String var price: String var bgColor: Color var body: Some View {VStack {Text(title) // define titie.fontweight (.bold).font(.system(size: 17)).foregroundcolor (Color(red: 190/255, green: 188/255, Blue: 184/255)) Text(price) // define price. FontWeight (.bold).font(.system(size: 30)) .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255)) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90).padding(20).background(bgColor) // Define the background color}Copy the code

After defining the variable, we can see that the system reported an error, so don’t worry.

This is because there are three variables defined in the pricingView subview, but when the master view references them, the master view does not know the values of these three variables, only their types.

So the system tells us that we need to add a specific value.

We can click “Fix” and Xcode will automatically add the missing values for us.

After “Fix”, Xcode fills in the missing variables.

At this point, we need to assign real values to the variables.

Example: Title assigned to “consecutive months”, price assigned to “¥18 “, bgColor assigned to Color(” fAF7F3 “).

PricingView (price: "¥18", bgColor: Color(" fAF7F3 ")Copy the code

Good, we’ve already created a pricing plan!

Like the UI draft, we need 3 pricing schemes, and since we’ve already removed the reusable code, we just need to copy it in the main view instead of copying a large chunk of extra code.

Price: "¥18", bgColor: Color(" fAF7F3 ")) pricingView(title: "¥18", price: "fAF7F3 ") Price: "¥30", bgColor: Color(red: 244/255, green: 244/255, blue: 245/255)) //12 月 pricingView(title: "12 months ", price: "¥228", bgColor: Color(red: 244/255, green: 244/255, blue: 245/255)Copy the code

Because in the main view, our title and pricing plan are placed in the same VStack, and the three pricing plans need to be distributed horizontally, that is, using HStack.

All we need to do is place the three pricing plans in an HStack in the main view so that they are aligned horizontally.

PricingView (title: "pricingView ", price: "¥18", bgColor: Color(" fAF7F3 ")) Price: "¥30", bgColor: Color(red: 244/255, green: 244/255, blue: 245/255)) //12 月 pricingView(title: "12 月", price: "¥228", bgColor: Color(red: 244/255, green: 244/255, blue: 245/255)}Copy the code

Next, we revise the style. We can see that the first pricing plan has rounded edges and the other two pricing plans have rounded corners.

So we need to add rounded edges to the first pricing plan and rounded corners to the other two pricing plans separately.

PricingView (price: "¥18", price: "¥18", bgColor: Color(" faf7F3 ")). Overlay (RoundedRectangle(cornerRadius: 6). Stroke (Color(red: 202/255, green: 169/255, blue: PricingView (price: "¥30", price: "¥30", bgColor: Color(red: 244/255, green: PricingView (title: "30 ", price:" 30 ", bgColor: Color(red: red)).cornerRadius(10) pricingView(title: "30 ", price:" 30 ", bgColor: Color(red: red) 244 / 255, green: 244 / 255, blue: 245 / 255)) .cornerRadius(10) }Copy the code

Next, we see that in the UI draft, the first price has the logo of “preferential treatment for the first month”, while the other two pricing schemes do not.

So we need to wrap the first pricing plan with ZStack again, and then add a “first month special” logo inside.

PricingView (title: "¥18", price: "¥18", bgColor: ¥30) pricingView(price: "¥18", bgColor: ¥30) Color("faf7f3")) .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106/255), lineWidth: 2)) // 14)) .fontWeight(.bold) .foregroundColor(.white) .padding(5) .background(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255)) .cornerRadius(4) .offset(x: 0, y: -65) }Copy the code

At this point, we will find the basic style okay.

The problem is that the main view seems to have too much code and is not elegant enough.

Combined with the code grouping management we learned in the previous chapter, we can separate [first month special offer] into a sub-view.

Mouse over to the Text() view in the ZStack pricing scheme, hold down the Command key, click select Text() view, and select Extract SubView.

After we get the new subview, we still need to rename it.

We renamed our first month ExtractedView to specialOfferView.

Mouse location to the original unnamed ExtractedView location, click the right mouse button, select Refactor, select Rename.

Very good! The code is much more elegant!

And then we’re going to add a.padding to the HStack.

Do you think you’re done? Don’t!

We see that the third pricing plan also has 1 Text(” ¥19.00/ month “), while the other pricing plans do not.

Let’s think about how to do that.

Add a Text() to pricingView? Try it first.

As before, let’s make a perPrice variable, which is a String.

Then add the Text(perPrice) code to the pricingView.

Struct pricingView: View {var title: String var price: String var perPrice: String var bgColor: Color var body: some View { VStack { Text(title) .fontWeight(.bold) .font(.system(size: 17)) .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255)) Text(price) .fontWeight(.bold) .font(.system(size: 30)) .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255)) Text(perPrice) .fontWeight(.bold) .font(.system(size: 17)) .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255)) } .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90) .padding(20) .background(bgColor) } }Copy the code

Go back to the main view and fill in the missing variables.

Click “Fix” and Xcode will automatically fill in the missing variables.

After adding the missing variables, complete the corresponding data according to the defined data types.

Thus, we complete the programming of the entire pricing scheme!

PricingView (price: "¥18", perPrice: "", bgColor: "") {pricingView(title: "¥18", perPrice: "", bgColor: Color("faf7f3") .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106/255), lineWidth: 2)) // specialOfferView()} // pricingView(title: "1 ", price: "30", perPrice: "", bgColor: Color(red: 244/255, Green: 244/255, Blue: 245/255)). CornerRadius (10) // 12 months pricingView(title: "12 月", price: "¥228", perPrice: "¥19.00/月", bgColor: Color(red: 244/255, green: 244/255, blue: 245 / 255)) .cornerRadius(10) } .padding()Copy the code