Эффект перехода между двумя встроенными представлениями в SwiftUI - PullRequest
Новая
       1

Эффект перехода между двумя встроенными представлениями в SwiftUI

0 голосов
/ 07 мая 2020

Если у меня есть структура вроде следующей: 

@State var currentView = "first"

VStack {
    if (state == "first") {
        View1()
    } else if (state == "second") {
        View2()
    } else {
        View3()
    }
}

И View1: 

@Published var currentView: String

Button("to second") {
    currentView = "second"
}

Как я могу убедиться, что View2 скользит слева при замене View1? Могу ли я динамически определить, с какой стороны будет выдвигаться следующий вид?

1 Ответ

0 голосов
/ 07 мая 2020
  1. Вам необходимо прикрепить анимацию к привязке, которую вы передаете своим представлениям
  2. Ваши представления должны иметь свойство @Binding, которое они будут изменять при нажатии кнопки
  3. Затем вы можете прикрепить переход к своим представлениям, вы можете контролировать край перехода, если используете .move (определите, с какой стороны сдвигается представление)

Я сделал ваши представления возьмите весь экран и укажите цвет, чтобы переход был более очевидным. Я также добавил длительность к каждому переходу, вы можете изменить или удалить его. 

import SwiftUI

struct ContentView: View {
    @State var currentView = "first"

    var body: some View {
        VStack {
            if (currentView == "first") {
                View1(currentView: $currentView.animation())
            } else if (currentView == "second") {
                View2(currentView: $currentView.animation())
            } else {
                View3(currentView: $currentView.animation())
            }
        }
    }

}

struct View1: View {

    @Binding var currentView: String

    var body: some View {
        ZStack {
            Rectangle().fill(Color.red)
            VStack {
                Text("View1")
                Button("to second") {
                    self.currentView = "second"
                }
            }

        }
        .transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
        .animation(.linear(duration: 2))

    }
}

struct View2: View {
    @Binding var currentView: String

    var body: some View {
        ZStack {
            Rectangle().fill(Color.yellow)
            VStack {
                Text("View2")
                Button("to third") {
                    self.currentView = "third"
                }
            }

        }
        .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
        .animation(.linear(duration: 2))

    }
}

struct View3: View {

    @Binding var currentView: String

    var body: some View {
        ZStack {
            Rectangle().fill(Color.pink)
            VStack {
                Text("View3")
                Button("to first") {
                    self.currentView = "first"
                }
            }

        }
        .transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
        .animation(.linear(duration: 2))
    }
}

...