es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

SwiftUI: Animar la transición de la vista y el cambio de posición al mismo tiempo.

13 Jul, 2023 Programación

Tengo un contenedor amarillo con una vista verde dentro. Quiero mover el contenedor mientras también oculto/muestro la vista interna verde, con una animación. Actualmente, estoy usando .offset para el movimiento y una declaración if para la transición de la vista verde.

El problema es que, aunque el contenedor amarillo se mueve, la vista verde no lo hace. Simplemente se desvanece en el destino establecido. Quiero que también se mueva junto con el contenedor amarillo.

Esto es lo que obtengo actualmente Esto es lo que quiero
[Imagen del contenedor amarillo moviéndose a la derecha e izquierda mientras la vista verde interna se desvanece dentro y fuera. La vista verde se mantiene en el lado derecho] [Imagen del contenedor amarillo moviéndose a la derecha e izquierda junto con la vista verde interna, que también se desvanece dentro y fuera]

Aquí está mi código:

struct ContentView: View {
    @State var showingSubview = false

    var body: some View {
        VStack {
            Button("Mostrar Subvista") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }

            if showingSubview {
                Text("Subvista")
                    .padding()
                    .background(Color.green)
            }
        }
        .padding()
        .background(Color.yellow)
        .offset(x: showingSubview ? 150 : 0, y: 0)
    }
}

¿Cómo puedo hacer que la vista verde se mueva junto con el contenedor amarillo, mientras se desvanece dentro y fuera? Preferiblemente, me gustaría seguir utilizando declaraciones if o switch para la inserción/eliminación.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mover la vista verde junto con el contenedor amarillo y también ocultar/mostrarla con una animación, puedes usar una combinación de los modificadores .offset y .opacity en tanto el contenedor amarillo como en la vista verde. Aquí tienes un ejemplo de código actualizado:

    struct ContentView: View {
    @State var showingSubview = false

    var body: some View {
        VStack {
            Button("Mostrar vista secundaria") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }

            if showingSubview {
                Text("Vista secundaria")
                    .padding()
                    .background(Color.green)
                    .opacity(showingSubview ? 1 : 0)
                    .offset(x: showingSubview ? 150 : 0, y: 0)
            }
        }
        .padding()
        .background(Color.yellow)
        .offset(x: showingSubview ? 150 : 0, y: 0)
    }
}

    En este ejemplo, agregamos los modificadores .opacity y .offset a la vista verde, y aplicamos el mismo modificador .offset al contenedor amarillo. También agregamos una expresión condicional al modificador .opacity, de manera que la vista verde solo sea visible cuando showingSubview es verdadero. De esta manera, tanto el contenedor amarillo como la vista verde se mueven juntos, y la vista verde se desvanece dentro y fuera con una animación.

Comments are closed.