類似於 Slack 的 SwiftUI 導航

Question

我正在嘗試制作一個類似於 Slack 應用程序的導航 UI，其中我的主屏幕覆蓋了菜單導航屏幕。 我創建了一個 ViewModifier，它使主屏幕可拖動。 現在我需要添加功能，以便當在藍色菜單屏幕上點擊“主頁”時，白色主頁視圖動畫回到中心。 我的想法是在全局 AppState 中跟蹤 NavigationState：

enum NavigationSelection {
  case menu
  case home
}

final class AppState: ObservableObject {
  let objectWillChange = PassthroughSubject<Void, Never>()
  @Published var currentNavigationSelection: NavigationSelection = .home 
}

然后當用戶點擊“Home”時，讓它更新 AppState 的 currentNavigationSelection，並讓 Draggable 視圖根據 currentNavigationSelection 確定它的偏移量。 我真的不確定這種方法，我很難在新的 SwiftUI 風格中考慮它。 任何建議將不勝感激。

視圖層次結構如下所示：

 var body: some View {
    ZStack {
        Menu()
        HomeTabView()
    }
}

並且 HomeTabView 應用了一個可拖動的 ViewModifier：

struct Slidable: ViewModifier {

  @EnvironmentObject var app: AppState

  @State private var viewState = SlidableViewDragState.normal.defaultPosition
  @State private var currentPosition: SlidableViewDragState = .normal {
    didSet {
        self.viewState = self.currentPosition.defaultPosition
    }
  }

  func body(content: Content) -> some View {
    return content
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight:
        .infinity, alignment: Alignment.topLeading)
        .offset(self.viewState)
        .animation(.interactiveSpring())
    .gesture(
        DragGesture()
            .onChanged({ (value) in
                self.viewState = self.currentPosition.applyXTranslation(x: value.translation.width)
            })
            .onEnded({ (value) in
                if value.translation.width < 0 && self.currentPosition == .normal {
                    return
                }
                if abs(value.translation.width) > self.currentPosition.switchThreshold {
                    self.currentPosition = self.currentPosition.oppositePosition
                    if self.currentPosition == .menuVisible {
                        self.app.currentNavigationSelection = .menu
                    }
                } else {
                    self.viewState = self.currentPosition.defaultPosition
                }
            })
    )
  }
}

Answer 1

移動兩個視圖

您目前如何定義兩者的位置？ 以我有限的經驗，我會使用ZStack嵌入HomeView和MenuView 。 這樣您就可以獨立移動視圖。

然后你使用一個point變量作為狀態，並使DragGesture設置point 。 然后您確定在拖動結束時設置的結束位置point 。

point是偏移計算的一部分。 您可以使用.offset(x: point.x)計算菜單偏移量，使用.offset(x: -Self.maxOffset - Self.minusHomeWidth / 2 + point.x)計算主偏移量。

minusHomeWidth是當您在主屏幕上時菜單仍顯示的寬度。

變量限定的最小值和最大值point ：

static let minOffset: CGFloat = 0
static let maxOffset: CGFloat = UIScreen.main.bounds.width - Self.minusHomeWidth
static let minusHomeWidth: CGFloat = UIScreen.main.bounds.width / 10

然后你可以讓它移動到主視圖寬度

Button(action: {
    self.point = CGPoint(x: Self.maxOffset, y: 0)
}) { Text("Go to Home") }