Adquira o hábito de escrever juntos! Este é o 14º dia da minha participação no "Nuggets Daily New Plan·April Update Challenge", clique para ver os detalhes do evento .
Prefácio:
Quando eu estava escrevendo este capítulo, descobri que ainda era um "uso avançado" desse conteúdo antes, mas depois de pensar nisso, não escrevi isso em profundidade primeiro. Eu estava preocupado que o conteúdo fosse demais para expandir e seria difícil de digerir, então listei apenas o método de uso simples.
Nos próximos capítulos, consideraremos ir cada vez mais fundo.Quando terminarmos de falar sobre como usar as funções básicas do SwiftUI, também consideraremos alguns casos de projetos reais, para que os entusiastas do SwiftUI possam realmente escrever projetos.
Lema do dia: Trabalhe duro e divirta-se.
Neste capítulo, você aprenderá a usar janelas pop-up modais para concluir saltos de página e retornos personalizados.
No capítulo anterior, aprendemos a usar a barra de navegação NavigationView para saltar entre as páginas, que é uma forma comum de saltar de página.
Outra maneira de abrir uma nova página, que também é comum em iPhones, é abrir uma nova página na parte inferior.
Podemos ver que esta página não "entra" completamente em uma nova página, ela permite que o usuário deslize para baixo para fechar a página, o que sem dúvida melhora muito a experiência do usuário.
Neste momento, o usuário sente que não há "interrupção" ou "interferência" na operação do usuário, e o que o usuário deseja fazer está concluído.
Este capítulo será dividido em 3 partes.
1. Salto de página baseado em janela pop-up modal;
2. Retorno personalizado de janela pop-up modal;
3. Janela pop-up de aviso de alertas;
Ok, o suficiente dito, vamos começar.
Parte 1: salto de página com base em pop-up modal
Primeiro, vamos criar um novo projeto e nomeá-lo SwiftUIModalView.
Vamos tentar um salto pop-up modal simples.
Por exemplo, criamos um botão na primeira página, quando clicamos no botão, uma página pop-up modal é aberta.
Como criar um botão, você pode aprender sobre o artigo anterior.
O código para criar o botão é o seguinte:
//按钮
Button(action: {
// 点击按钮跳转打开模态弹窗
}) {
// 按钮样式
Text("打开模态弹窗")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(5)
.padding(.horizontal, 20)
}
复制代码Em seguida, precisamos criar uma nova página para que possamos clicar no botão da primeira página para abrir a segunda página em uma janela pop-up modal.
Aqui, criamos uma página chamada DetailView com base no conteúdo do capítulo anterior.
No DetailView, colocaremos uma breve descrição do texto.
// 详情页
struct DetailView: View {
var body: some View {
Text("这是一个新页面")
}
}
复制代码Em seguida, implementamos o método jump usando a janela pop-up modal.
.sheet(isPresented: $showDetailView) {
//要跳转的页面
}
复制代码O método de popup modal é muito simples, usando o modificador .sheet.
isPresented是模态弹窗的触发条件，需要用$绑定一个操作，我们通常定义一个布尔值，它的初始状态为false。
@State var showDetailView = false
复制代码当我们在第一个页面点击按钮时，按钮的操作就把这个布尔值变成true，那么就可以同时触发.sheet打开模态弹窗。
这里我们定义了一个叫做showDetailView的参数，它是bool类型，而且初始值为false。
当我们点击按钮时，showDetailView切换状态。
self.showDetailView.toggle()
复制代码我们点击模拟器上的Preview试下效果。
点击按钮后，我们可以看到系统打开了我们定义好的模态弹窗页面DetailView了。
完整代码如下：
import SwiftUI
struct ContentView: View {
@State var showDetailView = false
var body: some View {
// 按钮
Button(action: {
// 点击按钮跳转打开模态弹窗
self.showDetailView.toggle()
}) {
// 按钮样式
Text("打开模态弹窗")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(5)
.padding(.horizontal, 20)
}
.sheet(isPresented: $showDetailView) {
DetailView()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
// 详情页
struct DetailView: View {
var body: some View {
Text("这是一个新页面")
}
}
复制代码第二部分：模态弹窗的自定义返回
在DetailView页面里，我们可以通过向下拖动页面，实现关闭页面的效果。
我们也可以尝试给DetailView加上一个关闭按钮，当我们点击关闭按钮时，也关闭这个页面。
还记得上一章我们学习过的NavigationView导航栏吗？我们可以给DetailView内容加上导航，然后导航右边加一个按钮操作。
// 详情页
struct DetailView: View {
var body: some View {
NavigationView {
//主体内容
Text("这是一个新页面")
.navigationBarItems(trailing: Button(action: {
// 点击按钮关闭弹窗
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}
复制代码好了，我们看到在DetailView导航栏右上角创建了一个新按钮。
那么接下来，我们要实现点击按钮，关闭弹窗。
这里我们有两种方法。
方法1:
和上一章NavigationView导航栏一样，创建一个环境变量：
@Environment(\.presentationMode) var presentationMode
复制代码然后当我们点击按钮时，调用它的函数方法。
self.presentationMode.wrappedValue.dismiss()
复制代码点击模拟器的Preview，我们发现实现了点击操作，关闭当前的模态弹窗页面。
完整代码如下：
// 详情页
struct DetailView: View {
//定义环境变量
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
//主体内容
Text("这是一个新页面")
.navigationBarItems(trailing: Button(action: {
// 点击按钮关闭弹窗
self.presentationMode.wrappedValue.dismiss()
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}
复制代码方法2:
也是之前的章节学习过 State状态和Binding绑定的使用。
我们可以在DetailView页面用@Binding绑定第一个页面创建的showDetailView布尔值。
//绑定参数
@Binding var showDetailView: Bool
复制代码然后在DetailView页面，点击按钮操作时，将showDetailView的值切换。
self.showDetailView.toggle()
复制代码最后在主页中.sheet跳转的目标页面绑定参数回来。
.sheet(isPresented: $showDetailView) {
DetailView(showDetailView: $showDetailView)
}
复制代码这样，我们也可以实现页面的返回操作。
DetailView页面完整代码如下：
// 详情页
struct DetailView: View {
//绑定参数
@Binding var showDetailView: Bool
var body: some View {
NavigationView {
//主体内容
Text("这是一个新页面")
.navigationBarItems(trailing: Button(action: {
// 点击按钮关闭弹窗
self.showDetailView.toggle()
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}
复制代码那么两种方法有什么不同呢？
第一种方法简单来说，是“撤销”原有的操作。
而第二种绑定的方式，是反向传递参数值给到第一个页面。
Ambos os métodos têm suas próprias vantagens, a vantagem do segundo método é que, se a segunda página precisar retornar com o valor do parâmetro, podemos retornar o valor do DetailView para a primeira página por meio de vinculação.
Parte 3: Popup de aviso de alertas
Na janela pop-up modal, existe um outro tipo chamado janela pop-up Alerts warning, que também é um tipo de janela pop-up modal.
Também vimos isso com frequência no aplicativo. Quando temos certeza de pagar ou acionar uma operação arriscada, o sistema abrirá a janela pop-up de aviso de Alertas.
A janela pop-up de aviso de alertas é uma janela pop-up para confirmação secundária e é frequentemente usada em cenários como lembretes de risco do sistema e se deve ser executado imediatamente.
O método de criar um pop-up de aviso é o mesmo que criar um pop-up modal geral, mas os parâmetros são diferentes.
.alert(isPresented: $showAlert) {
//Alerts结构体
}
复制代码Ainda usamos isPresented para disparar, definimos o estado de uma variável showAlert e o estado inicial é false.
@State var showAlert = false
复制代码Ao contrário de criar uma janela pop-up modal padrão, o conteúdo em .alert é a estrutura Alerts, que é uma janela pop-up de aviso padrão.
Usamos a estrutura Alert para criar o pop-up de alerta.
Alert(title: Text("这是弹窗标题"), message: Text("这是弹窗的内容"), primaryButton: .default(Text("确定")), secondaryButton: .cancel(Text("取消")))
复制代码Agora que você tem uma compreensão básica do uso da janela pop-up de aviso, vamos experimentá-la.
Alteramos o texto da página DetailView para "Open Alert Popup" e o transformamos em um formulário de botão.
Para que possamos clicar no botão de texto para obter o efeito de abrir a janela pop-up de aviso.
//主体内容
Button(action: {
// 点击按钮打开警告弹窗
}) {
Text("打开警告弹窗")
}
复制代码Em seguida, escrevemos o método da janela pop-up de aviso na página DetailView, que é semelhante ao método de .sheet na página inicial.
Primeiro defina uma variável showAlert, o valor inicial é false, quando o botão é clicado, o estado de showAlert muda.
Fora do botão Texto (observe o local), use .alert para criar um pop-up de alerta e, em seguida, preencha o código da estrutura Alerts no conteúdo do pop-up de alerta.
Isso conclui a criação do pop-up de aviso de Alertas.
O código completo do DetailView é o seguinte:
// 详情页
struct DetailView: View {
// 绑定参数
@Binding var showDetailView: Bool
@State var showAlert = false
var body: some View {
NavigationView {
// 主体内容
Button(action: {
// 点击按钮打开警告弹窗
self.showAlert.toggle()
}) {
Text("打开警告弹窗")
}
.alert(isPresented: $showAlert) {
//Alerts结构体
Alert(title: Text("这是弹窗标题"), message: Text("这是弹窗的内容"), primaryButton: .default(Text("确定")), secondaryButton: .cancel(Text("取消")))
}
.navigationBarItems(trailing: Button(action: {
// 点击按钮关闭弹窗
self.showDetailView.toggle()
}) {
Image(systemName: "chevron.down.circle.fill")
.foregroundColor(.gray)
}
)
}
}
}
复制代码Venha e experimente!
Se esta coluna for útil para você, por favor, curta, comente e siga~