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()
        }
    }
}

很好！代码清晰多了！