让 SwiftUI 拥有丝滑顺畅的侧滑菜单 Side Menu

2023-09-24 16:03:58

序幕：何为侧滑菜单？

侧滑菜单，也被称为侧边菜单、抽屉式菜单或汉堡包菜单，是一种常见的移动端导航模式，通过轻触或滑动屏幕边缘来打开或关闭一侧的菜单面板，同时主内容区域会被自动遮挡。这种交互方式在移动端应用中已广泛流行，为用户提供了一个简洁直观的导航体验。

SwiftUI 实践：从零构建侧滑菜单

1. 准备工作：

确保使用 Xcode 11 以上版本和 iOS 13 SDK。
在你的 Xcode 项目中创建新的 SwiftUI View 文件，命名为 ContentView。
在 ContentView 中添加如下代码：

struct ContentView: View {
    @State private var isMenuOpen = false
    
    var body: some View {
        ZStack {
            Color.blue
            
            // Main content goes here
            Text("Main Content")
                .foregroundColor(.white)
                .font(.largeTitle)
                .padding()
            
            // Side menu
            SideMenu(isOpen: $isMenuOpen)
        }
    }
}

在 ContentView 中添加一个新的 SideMenu 结构体，如下所示：

struct SideMenu: View {
    @Binding var isOpen: Bool
    
    var body: some View {
        ZStack {
            // Menu background
            Color.white
            
            // Menu items
            VStack {
                Text("Menu Item 1")
                Text("Menu Item 2")
                Text("Menu Item 3")
            }
        }
        .frame(width: 200)
        .offset(x: isOpen ? 0 : -200) // Slide the menu in and out
        .animation(.spring()) // Add a spring animation for smooth sliding
    }
}

在 ContentView 中，将 SideMenu 添加到 ZStack 中，并设置 isOpen 绑定：

ZStack {
    Color.blue
    
    // Main content goes here
    Text("Main Content")
        .foregroundColor(.white)
        .font(.largeTitle)
        .padding()
    
    // Side menu
    SideMenu(isOpen: $isMenuOpen)
}

2. 实现手势控制：

在 ContentView 中，添加一个 gesture 修饰符到 ZStack 上，以启用手势控制：

ZStack {
    Color.blue
    
    // Main content goes here
    Text("Main Content")
        .foregroundColor(.white)
        .font(.largeTitle)
        .padding()
    
    // Side menu
    SideMenu(isOpen: $isMenuOpen)
}
.gesture(DragGesture()
    .onChanged { gesture in
        // Slide the menu open or closed based on the gesture
    }
    .onEnded { _ in
        // Close the menu when the gesture ends
    }
)