SwiftUI极简教程05:代码分组管理

一同养成写作习气！这是我参加「日新计划 4 月更文应战」的第5天，点击查看活动详情。

前语：清明假日最终一天，本想着早起爬山，但还是因为太懒躺在床上起不来，正午吃了顿烧烤，下午去按了个肩，一天又差点过去了……趁着有点时间，赶紧把文章更新一下。

今天职言：看不到的部分，才是最重要的。

在上一章中，咱们使用了VStack, HStack, ZStack完成了一个定价计划页面。

实际编程中咱们能够发现，有时分Stack一层套一层，当页面元素更多时，会给咱们的编程添加难度。

这时，就需求对页面的部分代码进行分组整合，或者叫分块，拆分成一个个代码块。

这样当咱们需求维护其中一部分内容时，就能够快速定位和修订。

在ContentView.swift文件中，咱们能够看到SwiftUI的视图结构。

它在ContentView结构体中var（界说）了一个body（身体）视图，也便是咱们编程的内容都是这个ContentView视图“身体”的一部分。

//示例
struct ContentView: View {
var body: some View {
   Text("Hello World”)
}
}

咱们把标题、定价计划作为这个身体里的内容。

但当咱们“身体”里的元素越来越多的时分，咱们最好就把每个“部位”界说出来，比方：眼睛、耳朵、鼻子、嘴巴、头发，然后咱们再把这些元素放在“脸”的视图中。

这样，咱们每次需求调整部分内容时，比方眼睛，咱们就能够快速定位到眼睛的视图，再在里修正。

比方咱们找到“标题”的视图，将它拆出来。

鼠标移动到标题的HStack视图，按住command，挑选Extract SubView，这个操作是提取子视图。

点击后，咱们就能够把标题视图“抽离”了出来。

体系主动创建了一个ExtractedView()，这个便是还没有重新命名的“标题视图”。

咱们滚动到页面最下面，咱们能够看到ExtractedView()。

本来的标题视图被抽离出来，成为一个子视图了。

在原有的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，这样就完成了定价计划视图的抽离。

当然别忘了，咱们也要对新抽离出来的定价计划视图进行重命名。

鼠标定位到ExtractedView方位，点击鼠标右键，挑选Refactor，挑选Rename。

咱们重命名为pricingView，点击Rename就完成了定价计划的重命名啦！

//定价计划子视图
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)
}
}

咱们收起下代码块看下效果。

咱们的主视图ContentView中有两个子视图titleView和pricingView。

titleView和pricingView中有自己的代码，咱们要对哪部分修正，就能快速找到想要修正的视图进行修正。

//主视图
struct ContentView: View {
var body: some View {
VStack {
// 标题
titleView()
// 定价计划
pricingView()
}
}
}

很好！代码清晰多了！