Get into the habit of writing together! This is the 5th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .
Foreword: On the last day of the Qingming holiday, I wanted to get up early to climb the mountain, but I was too lazy to lie in bed and couldn’t get up. I ate a barbecue at noon, and pressed my shoulders in the afternoon. Another day almost passed... Take some time to update the article.
Today's job statement: The part you can't see is the most important.
In the previous chapter, we completed a pricing plan page using VStack, HStack, ZStack.
In actual programming, we can find that sometimes Stack is layered on top of one another. When there are more page elements, it will increase the difficulty of our programming.
At this time, part of the code of the page needs to be grouped and integrated, or divided into blocks, and divided into code blocks.
This way, when we need to maintain part of it, we can quickly locate and revise it.
In the ContentView.swift file, we can see the view structure of SwiftUI.
It var (defines) a body (body) view in the ContentView structure, that is, the content we program is part of the "body" of this ContentView view.
//示例
struct ContentView: View {
var body: some View {
Text("Hello World”)
}
}
复制代码We put titles, pricing plans as content in this body.
But when there are more and more elements in our "body", we'd better define each "part", such as: eyes, ears, nose, mouth, hair, and then we put these elements in " face" view.
In this way, every time we need to adjust some content, such as the eyes, we can quickly locate the view of the eyes and modify them there.
For example, we find the "title" view and take it apart.
Move the mouse to the HStack view of the title, hold down the command, and select Extract SubView. This operation is to extract the subview.
After clicking, we can "extract" the title view.
The system automatically creates an ExtractedView(), which is the "title view" that has not been renamed.
We scroll to the bottom of the page and we can see ExtractedView().
The original title view is extracted and becomes a subview.
在原有的ContentView视图中，我们只需要写子视图的名称，就可以在ContentView视图中引用标题的子视图，作为“脸的一部分”。
后续我们要修改标题子视图的样式，我们可以直接在标题子视图里面改，就不会被其他代码所干扰。
由于每次选择Extract SubView提取子视图时，子视图都是没有命名的，为了方便定位，我们最好给每个子视图命名。
重命名的方式也很简单，鼠标定位到原来没有命名的ExtractedView位置，点击鼠标右键，选择Refactor，选择Rename。
这样就可以系统可以搜索所有名称叫做ExtractedView的视图，并批量给ExtractedView重命名。
只要是叫ExtractedView名字的视图，都批量改名。
我们尝试重命名叫做“titleView”，给视图重命名最好遵循【驼峰命名法】。
驼峰命名法，简单来说，就是第一个单词开头小写，其他单词开头单词大写。
命名最好用简单的英文命名，方便以后自己查阅或者与他人协作时，保持代码的流畅性。
重命名后，我们可以看到原来没有命名的ExtractedView，已经改名叫做titleView啦！
//标题子视图
struct titleView: View {
var body: some View {
HStack {
VStack(alignment: .leading, spacing: 10) {
Text("会员套餐")
.fontWeight(.bold)
.font(.system(.title))
Text("解锁高级功能")
.fontWeight(.bold)
.font(.system(.title))
}
//间隔符
Spacer()
}
.padding()
}
}
复制代码另外科普一个知识点。
我们看到一个页面中可能有很长的代码，这是需要对这个页面指定的代码块进行编程。
这时，我们可以收起/展开其他代码块，需要在Xcode进行设置。
点击电脑顶部状态栏，选择Xcode，选择Preferences，我们就打开了Xcode的常用设置。
选择Text Editing，在Display页签内，勾选Code folding ribbon，就可以实现代码块折叠。
勾选后，我们鼠标移动到代码区左侧，就可以对指定的代码块，比如ZStack“连续包月”视图，进行展开和收起。
这样做，可以方便我们隐藏暂时不需要关注的代码块，更加集中在需要修订的部分。
紧接着，我们也把定价方案的视图抽离出子视图。
鼠标移动到HStack定价方案视图，按住command键，点击HStack，选择Extract SubView，这样就完成了定价方案视图的抽离。
Of course, don't forget that we will also rename the newly extracted pricing plan view.
Position the mouse to the ExtractedView position, click the right mouse button, select Refactor, and select Rename.
We renamed it to pricingView, click Rename to complete the renaming of the pricing plan!
//定价方案子视图
struct pricingView: View {
var body: some View {
HStack {
// 连续包月
ZStack {
VStack {
Text("连续包月")
.fontWeight(.bold)
.font(.system(size: 17)
.foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
Text("¥18")
.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(Color("faf7f3"))
.overlay(RoundedRectangle(cornerRadius: 6)
.stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
// 首月特惠
Text("首月特惠")
.font(.system(size: 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)
}
// 1个月
VStack {
Text("1个月")
.fontWeight(.bold)
.font(.system(size: 17))
.foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
Text("¥30")
.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(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
.cornerRadius(10)
// 12个月
VStack {
Text("12个月")
.fontWeight(.bold)
.font(.system(size: 17))
.foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
Text("¥228")
.fontWeight(.bold)
.font(.system(size: 30))
.foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
Text("¥19.00/月")
.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(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
.cornerRadius(10)
} // HStack结束位置
.padding(.horizontal)
}
}
复制代码Let's put away the next code block to see the effect.
We have two subviews titleView and pricingView in our main view ContentView.
TitleView and pricingView have their own code. We can quickly find the view we want to modify and modify which part we want to modify.
//主视图
struct ContentView: View {
var body: some View {
VStack {
// 标题
titleView()
// 定价方案
pricingView()
}
}
}
复制代码very good! The code is much cleaner!