Adquira o hábito de escrever juntos! Este é o 5º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .
Prefácio: No último dia do feriado de Qingming, eu queria acordar cedo para subir a montanha, mas estava com preguiça de deitar na cama e não conseguia me levantar. Comi um churrasco ao meio-dia e apertei meus ombros mais um dia quase se passou... Tire um tempo para atualizar o artigo.
Declaração de trabalho de hoje: A parte que você não pode ver é a mais importante.
No capítulo anterior, completamos uma página de plano de preços usando VStack, HStack, ZStack.
Na programação real, podemos descobrir que às vezes o Stack é colocado em camadas, quando há mais elementos de página, isso aumenta a dificuldade de nossa programação.
Neste momento, parte do código da página precisa ser agrupado e integrado, ou dividido em blocos, e dividido em blocos de código.
Dessa forma, quando precisarmos manter parte dele, podemos localizá-lo e revisá-lo rapidamente.
No arquivo ContentView.swift, podemos ver a estrutura de visualização do SwiftUI.
Ela var (define) uma visão de corpo (corpo) na estrutura ContentView, ou seja, o conteúdo que programamos faz parte do "corpo" dessa visão de ContentView.
//示例
struct ContentView: View {
var body: some View {
Text("Hello World”)
}
}
复制代码Colocamos títulos, planos de preços como conteúdo neste corpo.
Mas quando há cada vez mais elementos em nosso "corpo", é melhor definirmos cada "parte", como: olhos, orelhas, nariz, boca, cabelo, e então colocamos esses elementos na visão de "rosto".
Dessa forma, toda vez que precisarmos ajustar algum conteúdo, como os olhos, podemos localizar rapidamente a visão dos olhos e modificá-los lá.
Por exemplo, encontramos a visualização "título" e a desmontamos.
Mova o mouse para a visualização HStack do título, mantenha pressionado o comando e selecione Extract SubView Esta operação é para extrair a subview.
Após clicar, podemos "extrair" a visualização do título.
O sistema cria automaticamente uma ExtractedView(), que é a "visualização de título" que não foi renomeada.
Rolamos até o final da página e podemos ver ExtractedView().
A visualização do título original é extraída e se torna uma subvisualização.
在原有的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，这样就完成了定价方案视图的抽离。
Claro, não se esqueça de que também renomearemos a visualização do plano de preços recém-extraído.
Posicione o mouse na posição ExtractedView, clique com o botão direito do mouse, selecione Refatorar e selecione Renomear.
Nós o renomeamos para pricingView, clique em Renomear para concluir a renomeação do plano de preços!
//定价方案子视图
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)
}
}
复制代码Vamos guardar o próximo bloco de código para ver o efeito.
Temos duas subvisualizações titleView e pricingView em nossa visualização principal ContentView.
TitleView e pricingView têm seu próprio código. Podemos encontrar rapidamente a visualização que desejamos modificar e modificar qual parte desejamos modificar.
//主视图
struct ContentView: View {
var body: some View {
VStack {
// 标题
titleView()
// 定价方案
pricingView()
}
}
}
复制代码muito bom! O código é muito mais limpo!