I have a use case with a vertical menu with items: link_target1
, ..., link_target5
.
And I have a container that display a View
associated with one of those items.
When I click on one of the menu items, I set a state and display the matching view according to this state.
What i'm trying to achieve, is a dynamic sliding effect on views transition:
If I go from target3
to target1
for example, i'm moving upward. So both views should slide to the bottom.
target3 view
disappears by sliding down and target1 view
appears by sliding down also.
So it's like all views are vertically stacked and by clicking to the menu I slide from one to another.
I need to be able to control, at the same time, the transition of the discarded and presented view and I'm only able to do that when the user actually click on the menu (cause otherwise, I don't know if we are going up or down).
代码如下所示:
enum ViewScreen: String, CaseIterable, Identifiable {
case target1
case target2
case target3
case target4
case target5
var id: String { return self.rawValue }
var index: Int { ViewScreen.allCases.firstIndex(of: self) ?? 0 }
}
struct ContentView: View {
@State var target: ViewScreen = .target1 {
willSet {
self.previousTarget = target
}
}
@State var previousTarget: ViewScreen = .target1
var direction: AnyTransition {
get {
previousTarget.index <= target.index ? .move(edge: .top) : .move(edge: .bottom)
}
}
var body: some View {
HStack(alignment: .top) {
SidebarView(target: $target) // It just set target to the clicked link
Group {
switch target {
case .target1: View1()
case .target2: View2()
case .target3: View3()
case .target4: View4()
case .target5: View5()
}
}.transition(AnyTransition.opacity.combined(with: direction))
}
}
}
有没有可能进行过渡?欢迎任何帮助.谢谢你们!