¡SwiftUI completa la barra de navegación retráctil! Buen chico, aún no he recogido una ola~

¡Trabajar juntos para crear y crecer juntos! Este es el día 26 de mi participación en el "Nuggets Daily New Project · Desafío de actualización de agosto", haga clic para ver los detalles del evento .

Antecedentes del proyecto

Cuando estaba visitando cierta estación, vi un caso de HTMLl+CSSconstrucción de una barra de navegación telescópica, que fue bastante interesante.

En el desarrollo del lado del cliente, la barra de navegación es uno de los elementos de diseño esenciales. Pero mirando muchas aplicaciones domésticas, son básicamente las barras de navegación más básicas, sin nuevas ideas.

En este capítulo, intentaremos SwiftUIconstruir una barra de navegación retráctil como ejercicio.

Entonces empecemos.

Proyecto de construcción

Primero, crea un nuevo SwiftUIproyecto llamado SwiftUITabView.

Contraer la vista

En términos de diseño de estilo, dado que necesitamos construir una barra de navegación telescópica, debe desmontarse en dos estilos : estirable y encogible .

Primero necesitamos declarar una variable para almacenar su estado , ejemplo:

@State var isFold: Bool = false
复制代码

Luego construyamos el estilo al encoger, ejemplo:

// 收起效果
func foldView() -> some View {
    Image(systemName: "list.bullet")
        .font(.system(size: 24))
        .frame(minWidth: 0, maxWidth: 60, minHeight: 0, maxHeight: 60)
        .foregroundColor(.black)
        .background(.white)
        .cornerRadius(30)
        .onTapGesture {
            withAnimation(.spring()) {
                self.isFold.toggle()
            }
        }
}
复制代码

En el código anterior, construimos la vista con estilo al reducir foldView. Además de los estilos de vista básicos, alternamos isFoldel estado de la vista del botón cuando hacemos clic en él.

Ampliar vista

Luego, cuando se expande la vista, la parte de la vista expandida consta de dos partes, una es el 关闭botón " " y la otra es 标准的导航栏, construyamos el estilo.

Primero necesitamos declarar una matriz para indicar el contenido de nuestra barra de navegación, ejemplo:

let menuItems = ["首页", "沸点", "课程", "我的"]
复制代码

Luego declare una variable para representar la columna de la barra de navegación actualmente seleccionada, por ejemplo:

@State var selectedItem = 0
复制代码

Finalmente, creamos una nueva vista para completar la parte de estilo de la vista expandida, ejemplo:

// 展开效果
func unfoldView() -> some View {
    HStack {
        Image(systemName: "xmark")
            .font(.system(size: 24))
            .foregroundColor(.pink)
            .onTapGesture {
                withAnimation(.spring()) {        
                    self.isFold.toggle()
                }
            }

        ForEach(menuItems.indices, id: \.self) { index in
            if index == selectedItem {
                Text(menuItems[index])
                    .font(.system(size: 17))
                    .padding(.horizontal, 15)
                    .foregroundColor(.pink)
            } else {
                Text(menuItems[index])
                    .font(.system(size: 17))
                    .padding(.horizontal, 15)
                    .foregroundColor(.black)
                    .onTapGesture {
                        selectedItem = index
                    }
            }
        }
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 60)
    .background(.white)
    .cornerRadius(30)
    .padding(.horizontal)
}
复制代码

En el código anterior, creamos una vista expandida unfoldView.

Luego use el HStackdiseño de vista horizontal para mostrar un botón y el contenido de texto de la barra de navegación uno al lado del otro. Cuando hacemos clic en el 关闭botón " ", el isFoldestado de cambio, y también indexactualizamos selectedItemla columna seleccionada de acuerdo con la posición actual en la que se hizo clic. Cuando se selecciona , establecemos un color de texto rosa para la columna seleccionada para distinguirla.

Vista de inicio

Después de completar las dos vistas, volvemos a la ContentViewvista, isFoldconfiguramos la vista de acuerdo con, ejemplo:

var body: some View {
    ZStack {
        Color(.systemGray6)

        if isFold {
            unfoldView()
        } else {
            foldView()
        }
    }.edgesIgnoringSafeArea(.all)
}
复制代码

El efecto no es malo, pero falta la animación de transición y toda la interacción parece un poco contundente.

animación de transición

Primero declaramos una variable para almacenar el estado de la posición de intercambio, ejemplo:

@Namespace private var Transition
复制代码

Luego use el matchedGeometryEffectmodificador para el cambio de transición de posición. El matchedGeometryEffectmodificador necesita modificar dos botones, por ejemplo:

//收起时按钮
Image(systemName: "list.bullet”)
    .matchedGeometryEffect(id: "fold", in: Transition)    

//展开时按钮
Image(systemName: "xmark”)
    .matchedGeometryEffect(id: "fold", in: Transition)
复制代码

Aquí, si queremos ver el efecto final, necesitamos ejecutar el simulador para ver el efecto interactivo final en el entorno real de la máquina.

Vista previa del proyecto

¡Felicitaciones, ha completado todo el contenido de este capítulo!

Ven y pruébalo.

Si esta columna es útil para usted, haga clic en Me gusta, comente y siga ~