一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して5日目です。クリックしてイベントの詳細をご覧ください。
序文：清明節の最終日、早起きして山に登りたかったのですが、寝るのが面倒で起き上がれず、正午にバーベキューを食べて肩をすくめました。午後。もう1日が過ぎました...記事を更新するために少し時間がかかります。
今日の仕事の声明：あなたが見ることができない部分が最も重要です。
前の章では、VStack、HStack、ZStackを使用して料金プランページを完成させました。
実際のプログラミングでは、スタックが重なっていることがあります。ページ要素が多いと、プログラミングが難しくなります。
このとき、ページのコードの一部をグループ化して統合するか、ブロックに分割してコードブロックに分割する必要があります。
このようにして、その一部を維持する必要がある場合、それをすばやく見つけて修正することができます。
ContentView.swiftファイルでは、SwiftUIのビュー構造を確認できます。
これは、ContentView構造内の本体（本体）ビューを変数（定義）します。つまり、プログラムするコンテンツは、このContentViewビューの「本体」の一部です。
//示例
struct ContentView: View {
var body: some View {
Text("Hello World”)
}
}
复制代码タイトル、価格プランをコンテンツとしてこの本文に入れます。
しかし、「体」に要素が増える場合は、目、耳、鼻、口、髪などの各「部分」を定義して、これらの要素を「顔」ビューに配置することをお勧めします。
このようにして、目などのコンテンツを調整する必要があるたびに、目のビューをすばやく見つけて、そこで変更することができます。
たとえば、「タイトル」ビューを見つけて分解します。
タイトルのHStackビューにマウスを移動し、コマンドを押したまま、[サブビューの抽出]を選択します。この操作では、サブビューを抽出します。
クリックすると、タイトルビューを「抽出」できます。
システムは、名前が変更されていない「タイトルビュー」である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の位置に置き、マウスの右ボタンをクリックして、[リファクタリング]を選択し、[名前の変更]を選択します。
名前をpricingViewに変更し、[名前の変更]をクリックして価格プランの名前変更を完了します。
//定价方案子视图
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には、2つのサブビューtitleViewとpricingViewがあります。
TitleViewとpricingViewには独自のコードがあり、変更するビューをすばやく見つけて、変更する部分を変更できます。
//主视图
struct ContentView: View {
var body: some View {
VStack {
// 标题
titleView()
// 定价方案
pricingView()
}
}
}
复制代码とても良い！コードはずっときれいです！