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

Foreword: Qingming holiday last day, this thinking of getting up early to climb mountains, but still because too lazy lying in bed can not get up, at noon to eat a barbecue, afternoon to press a shoulder, a day almost the past…… Update the article while you have some time.

What you can’t see is what’s important.

In the previous chapter, we used VStack, HStack, ZStack to complete a pricing scheme page.

In practical programming, we can find that sometimes Stack layer on layer, when there are more page elements, it will make our programming more difficult.

At this point, parts of the page need to be grouped and integrated, or chunked, into code blocks.

This way, when we need to maintain a piece of content, we can quickly locate and revise it.

In the contentView.swift file, we can see the view structure of SwiftUI.

It has a body view inside the ContentView structure var, so everything we program is part of the ContentView body.

Struct ContentView: View {var body: some View {Text("Hello World ")}}Copy the code

We take the title, the pricing plan as the content in this body.

But as we add more and more elements to our “body”, we better define each “part”, such as eyes, ears, nose, mouth, hair, and then we put these elements in the “face” view.

This way, every time we need to change something, like the eye, we can quickly locate the view of the eye and make changes in it.

Let’s say we find the “title” view and pull it out.

Hover over the HStack view of the title, hold down Command, and select Extract SubView, which extracts the SubView.

Once clicked, we can “pull out” the title view.

The system automatically creates an ExtractedView(), which is the “title view” that hasn’t been renamed yet.

If we scroll to the bottom of the page, we can see ExtractedView().

The original title view is removed and becomes a subview.

In the old ContentView view, we simply wrote the name of the subview to refer to the subview of the title as “part of the face” in the ContentView view.

Next we need to change the style of the title subview, so we can change it directly in the title subview without being disturbed by other code.

Since the subviews are unnamed each time you select Extract SubView to Extract a SubView, it is best to give each SubView a name for ease of positioning.

Rename the way is also very simple, mouse location to the original not named ExtractedView location, click the right mouse button, select Refactor, select Rename.

In this way, the system can search for all views named ExtractedView, and batch rename ExtractedView.

So any view that’s called ExtractedView, rename it in bulk.

We tried to rename the view to “titleView”, and it is best to follow the hump nomenclature for renaming the view.

The hump nomenclature, in a nutshell, is that the first word begins in lower case and the other words begin in upper case.

It is best to use a simple English name, easy to consult later or with others to maintain the smooth code.

After renaming, we can see that the original unnamed ExtractedView has been renamed titleView!

Struct titleView: View {var body: some View {HStack {VStack(alignment:.leading, spacing: Font (.system(.title)) Text(" unlock advanced features ").fontweight (.bold).font(.system(.title))} 10) {Text(" membership package ").fontweight (.bold).font(.system(.title))} // Spacer()}.padding()}}Copy the code

Another popular science knowledge point.

We see that a page may have very long code, and we need to program the code block specified for the page.

At this point, we can unpack/expand other code blocks, which need to be set up in Xcode.

By clicking on the status bar at the top of the computer, selecting Xcode and Preferences, we open up the usual Settings for Xcode.

Select Text Editing and on the Display TAB, select Code Folding Ribbon to fold a Code block.

Once checked, we can move the mouse to the left of the code area to expand and collapse the specified code block, such as the ZStack “Continuous monthly” view.

Doing so makes it easier to hide blocks of code that we don’t need to focus on for the time being and focus more on those that need to be fixed.

Next, we also pull the pricing scheme view out of the subview.

Move your mouse over to the HStack Pricing plan view, hold down the Command key, click on the HStack, and select Extract SubView to complete the withdrawal of the pricing plan view.

Don’t forget, of course, that we will also rename the newly extracted pricing scheme view.

Mouse over to the ExtractedView location, right-click, select Refactor, and select Rename.

Rename to pricingView, Rename to pricing plan.

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: 24)) Text("¥228").fontweight (.bold).font(.system(size: 30)).foregroundcolor (Color(red: 239/255, green: 24) 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

Let’s close up the code block and see what it looks like.

Our main view ContentView has two subviews titleView and pricingView.

TitleView and pricingView have their own code in them, so we can quickly find the view we want to change and change it.

Struct ContentView: View {var body: some View {VStack {titleView() // pricingView()}}Copy the code

Very good! The code is much clearer!