¡Acostúmbrate a escribir juntos! Este es el día 13 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .
Prólogo: La computadora falla dos veces sin ningún motivo. Puede ser porque escribo código y artículos mientras trabajo en la interfaz de usuario, pero he trabajado mucho en la computadora. Afortunadamente, el artículo se guarda en tiempo real, cada vez que lo abro, la escritura original sigue ahí, lo que me da un susto de muerte. Apégate a la palabra clave, apégate a la actualización, hoy es el día 13 de la actualización diaria, ¡vamos!
Palabra del día: Escribe para alguien.
En este capítulo, aprenderá a usar NavigationView para crear una barra de navegación básica y saltos de página basados en la barra de navegación.
Si usa UIkit, debería haber intentado usar storyboard o UINavigationController para crear la navegación de la página.
En SwiftUI, usamos NavigationView, que es básicamente lo mismo que List en el capítulo anterior.
Este capítulo se dividirá en 3 partes.
1. Cree una barra de navegación simple;
2. Salto de página basado en la barra de navegación;
3. Retorno personalizado de la barra de navegación;
Parte 1: Construcción de una barra de navegación simple
Primero intentemos agregar NavigationView a la Lista original para ver el efecto de la barra de navegación.
El borrador de la interfaz de usuario es el siguiente:
Primero, creemos un nuevo proyecto y asígnele el nombre SwiftUINavigationView.
Luego, tomamos el código del capítulo anterior como ejemplo para explicar.
el código se muestra a continuación:
import SwiftUI
struct ContentView: View {
// 定义数组，存放数据
var Messages = [
Message(name: "这是微信", image: "weixin"),
Message(name: "这是微博", image: "weibo"),
Message(name: "这是QQ", image: "qq"),
Message(name: "这是电话", image: "phone"),
Message(name: "这是邮箱", image: "mail")
]
var body: some View {
// 列表
List(Messages) { Message in
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Message: Identifiable {
var id = UUID()
var name: String
var image: String
}
复制代码La construcción de NavigationView es la misma que la del método List, solo envuelve el contenido que necesitamos en NavigationView.
NavigationView{ }
复制代码Tenga en cuenta aquí que toda la lista debe envolverse.
Una vez que se completa el paquete, podemos ver que la posición de la barra de navegación se deja en la parte superior de toda la Lista.
//导航栏
NavigationView{
// 列表
List(Messages) { Message in
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}
复制代码Intentemos agregar un título, los modificadores que usamos aquí son:
.navigationBarTitle("我是标题")
复制代码El modificador debe agregarse a la capa más externa del contenido, no a la capa externa de NavigationView.
De esta manera, obtenemos una lista con títulos grandes.
//导航栏
NavigationView {
// 列表
List(Messages) { Message in
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}.navigationBarTitle("我是标题")
}
复制代码¿No es fácil?
SwiftUI simplifica muchas cosas, de modo que básicamente usamos diferentes controles de la misma manera.
Parte 2: Salto de página basado en la barra de navegación
Avance a continuación.
Intentamos saltar de una página a la segunda y volver.
El borrador de la interfaz de usuario es el siguiente:
我们先完成第二个页面的内容，然后再从第一个页面点击对应的列表进入第二个页面。
我们在ContentView页面最后创建一个新的页面，命名为DetailView。
代码如下：
//详情页面
struct DetailView: View {
var message: Message
var body: some View {
VStack {
Image(message.image)
.resizable()
.frame(width: 80, height: 80)
Text(message.name)
.font(.system(.title, design: .rounded))
.fontWeight(.black)
Spacer()
}
}
}
复制代码我们在DetailView里面引用Message数组的数据，将Image图片和Text文字换成数组的参数。
这样我们就可以第一个页面点击哪一个列表，然后就能将对应的图片和文字带入到第二个页面，也就是所谓的传参。
然后回到第一个页面里。
我们需要点击List列表，然后跳转到第二个页面。
这时候我们需要使用一个新的参数，叫做NavigationLink。
NavigationLink(destination: DetailView()) {
//点击跳转的内容
}
复制代码destination表明我们要跳转的页面，这里我们需要跳转的页面是DetailView。
我们需要点击List里面的一行，然后跳转到第二个页面，因此NavigationLink需要放在List里面，而不是包裹住整个List。
如果NavigationLink包裹住List，那么就变成了点击整个List跳转了，这里我们需要的是点击List单独一行对应跳转。
NavigationView {
// 列表
List(Messages) { Message in
NavigationLink(destination: DetailView(message: Message)) {
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}.navigationBarTitle("我是标题")
}
复制代码我们可以看到，跳转的目标是DetailView，并且我们把Message结构体的参数传递给了DetailView页面的message变量。
这样就实现了我们Message结构体里的参数传递给message，也就实现了，我们点击的Message是哪一个，DetailView页面的message对应传递哪一个参数。
我们点击模拟器上面的Preview运行下模拟器，尝试点击List其中一行，就可以体验下点击跳转页面，再点击返回到主页的效果。
科普一个知识点。
我们在常用的App当中看到的顶部导航栏文字是居中的，这是怎么实现的呢？
也很简单，ios默认的是大标题效果（.automatic），也就是：
.navigationBarTitle("我是标题", displayMode: .automatic)
复制代码我们只需要给.navigationBarTitle("我是标题”)里加入参数控制（.inline），就可以实现文字标题居中效果。
.navigationBarTitle("我是标题", displayMode: .inline)
复制代码好了，至此我们就完成了基于导航栏的页面跳转方式啦！
第三部分：导航栏自定义返回
A continuación, echemos un vistazo a la página DetailView y veremos que esta operación de "retorno" no parece tan bonita.
Muchas veces, nuestra acción de "atrás" puede ser un botón de icono o un botón de "texto".
¿Hay alguna forma de embellecer la operación de volver a la página de inicio?
Vamos a analizarlo.
Solo necesitamos ocultar la operación de devolución que viene con el sistema y luego "escribir" una operación de devolución nosotros mismos.
Aquí usamos el parámetro para ocultar el botón de navegación hacia atrás:
.navigationBarBackButtonHidden(true)
复制代码A continuación, escribimos un botón de retorno nosotros mismos, aquí, necesitamos usar otro parámetro:
.navigationBarItems(leading: Button(action : {
// 点击按钮后的操作
}){
//按钮及其样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
})
复制代码Intentemos usar el botón de icono como botón Atrás.
Aquí se usa la imagen que viene con el sistema y el color de relleno es gris.
Ejecutar y ver, podemos hacer clic en los datos de la lista de la página de inicio para ingresar a la página de detalles.
Sin embargo, no pasa nada cuando golpeamos la acción trasera.
Esto se debe a que no hemos implementado el método que devuelve.
SwiftUI proporciona un valor de entorno incorporado (.presentationMode), podemos usar este valor de entorno para lograr la operación de volver a la vista anterior.
@Environment(\.presentationMode) var mode
复制代码Luego, cuando se llama a la operación de clic del botón de retorno, se llama a la función descartar () del valor del entorno y se puede realizar la operación devuelta.
self.mode.wrappedValue.dismiss()
复制代码El código completo de la página DetailView es el siguiente:
// 详情页面
struct DetailView: View {
//环境值
@Environment(\.presentationMode) var mode
var message: Message
var body: some View {
VStack {
Image(message.image)
.resizable()
.frame(width: 80, height: 80)
Text(message.name)
.font(.system(.title, design: .rounded))
.fontWeight(.black)
Spacer()
}
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: Button(action : {
// 点击按钮后的操作
self.mode.wrappedValue.dismiss()
}){
//按钮及其样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
})
}
}
复制代码Al ejecutar el código, ¡encontramos que la operación de retorno del botón personalizado está implementada!
Bueno, el punto de conocimiento de hoy está aquí.
Si esta columna es útil para usted, haga clic en Me gusta, comente y siga ~