如何用SwiftUI实现自定义侧滑菜单与抽屉动画？

在SwiftUI里实现抽屉菜单，核心是对水平偏移量的实时控制。不同于UIKit需要自己维护约束或借助第三方库，SwiftUI的状态驱动机制让侧滑菜单可以完全围绕一个CGFloat偏移值展开。把主界面放在ZStack底部，把抽屉面板放在上层，并让抽屉的x偏移始终跟手势保持同步，就能获得跟手的拖拽体验。

一、基础布局：用ZStack和offset构建抽屉

侧滑菜单最常用的结构是ZStack叠加。主界面占满整个屏幕，抽屉面板宽度固定，初始位置被移出屏幕左侧。可以通过状态变量offset来控制面板的横向位移。offset为正时向右移动，为负时向左移动。若抽屉宽度为260，则初始offset设为-260，展开时offset设为0，这样面板正好隐藏在屏幕外。

布局代码比较直观。主界面和抽屉面板都放在ZStack里，主界面使用offset(max(offset,0))，这样抽屉展开时主界面也可以略微右移或保持不动。抽屉面板设置frame宽度，并通过offset(x: offset)改变位置。接下来给抽屉添加手势，用DragGesture监听水平位移，在onChanged中更新offset，在onEnded中根据速度与位置决定最终状态。这里不直接使用animation修饰符包裹，而是把动画放到状态变化之后，避免拖拽时产生滞后。

struct DrawerMenuView: View {
    @State private var offset: CGFloat = -260
    private let maxOffset: CGFloat = 0
    private let minOffset: CGFloat = -260

    var body: some View {
        ZStack {
            MainContentView()
                .offset(x: max(offset, 0))
                .animation(.spring(response: 0.35, dampingFraction: 0.8), value: offset)

            DrawerPanel()
                .frame(width: 260)
                .offset(x: offset)
                .gesture(dragGesture)
        }
    }

    private var dragGesture: some Gesture {
        DragGesture()
            .onChanged { value in
                let newOffset = minOffset + value.translation.width
                if newOffset <= maxOffset && newOffset >= minOffset {
                    offset = newOffset
                }
            }
            .onEnded { value in
                let threshold: CGFloat = 130
                withAnimation(.spring(response: 0.35, dampingFraction: 0.8)) {
                    if value.predictedEndTranslation.width > threshold {
                        offset = maxOffset
                    } else {
                        offset = minOffset
                    }
                }
            }
    }
}

实际项目中主界面可能需要添加遮罩层，点击遮罩关闭抽屉。可以创建一个透明背景，当抽屉展开时出现，同时设置点击手势。遮罩层可以用Color.black.opacity(offset == maxOffset ? 0.3 : 0)来实现，但要注意遮罩层位于抽屉下方、主界面上方。如果希望主界面也向右移动形成景深效果，可以用offset除以一个系数，让主界面位移为抽屉的三分之一。这样抽屉滑动时，底层内容也会产生轻微推进感。

二、自定义Slide Transition让展开更自然

默认的offset变化已经能产生滑动，但如果你希望抽屉出现和消失使用不同动画曲线，或者在视图层级切换时也能保留滑入滑出效果，可以自定义AnyTransition。SwiftUI允许通过modifier扩展定义transition。例如定义一个drawerSlide转场，插入时从左侧移入并且透明度从0.4过渡到1，移除时向左移出并降低透明度。

创建自定义转场需要给AnyTransition增加静态方法。使用modifier(active:identity:)是最直接的方式。active状态表示转场开始或结束时的视图样式，identity表示最终状态。这里可以定义两个状态：一个偏移到-260并降低透明度，另一个偏移为0且完全不透明。modifier负责返回两个不同的视图修饰器。这样在条件渲染抽屉面板时，配合withAnimation就能使用这个转场。

struct DrawerModifier: ViewModifier {
    let offsetX: CGFloat
    let opacity: Double

    func body(content: Content) -> some View {
        content
            .offset(x: offsetX)
            .opacity(opacity)
    }
}

extension AnyTransition {
    static func drawer(offsetX: CGFloat) -> AnyTransition {
        .modifier(
            active: DrawerModifier(offsetX: offsetX, opacity: 0.4),
            identity: DrawerModifier(offsetX: 0, opacity: 1)
        )
    }
}

如果想在条件分支中使用，可以写成if showDrawer { DrawerPanel().transition(.drawer(offsetX: -260)) }，然后通过withAnimation触发状态改变。这样抽屉在插入和移除时会自动应用滑入滑出动画。与手势控制不同，这种方式更适合由按钮触发展开收起，而不是拖拽。因为拖拽需要跟手，必须直接修改offset值；而transition用于视图插入移除的动画，不能实时跟随手指位置。

除了完全自定义modifier，也可以使用SwiftUI内置的move和opacity组合。例如.asymmetric(insertion: .move(edge: .leading).combined(with: .opacity), removal: .move(edge: .leading).combined(with: .opacity))。这种写法简单，但缺少透明度变化和偏移量控制。自定义modifier的好处是可以同时指定精确偏移和透明度，还能在中途加入scaleEffect、rotationEffect等其他效果，做出更丰富的抽屉转场。

三、边缘拖拽与手势冲突处理

边缘拖拽是侧滑菜单的重要交互。用户从屏幕左边缘向右滑动，应该唤醒抽屉。可以通过限制DragGesture的起始位置来判断是否从边缘开始。但SwiftUI的DragGesture本身没有提供边缘限定，需要借助GeometryReader或屏幕宽度手动判断。例如在onChanged首次触发时记录初始x，如果初始x大于30则忽略这次拖拽。或者使用simultaneousGesture和gesture优先级来解决与列表滚动冲突。

更稳妥的做法是使用UIKit手势的封装，因为UIScreenEdgePanGestureRecognizer专门用于屏幕边缘滑动，不会与普通的滚动手势冲突。SwiftUI可以通过UIViewRepresentable创建一个EdgePanView，并在回调中把translation传给SwiftUI状态。这样抽屉只在真正从屏幕边缘滑动时才被拖动，列表和滚动视图不会受到影响。

struct EdgePanView: UIViewRepresentable {
    var onTranslation: (CGFloat) -> Void

    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        let gesture = UIScreenEdgePanGestureRecognizer(
            target: context.coordinator,
            action: #selector(Coordinator.handleEdgePan(_:))
        )
        gesture.edges = .left
        view.addGestureRecognizer(gesture)
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}

    func makeCoordinator() -> Coordinator {
        Coordinator(onTranslation: onTranslation)
    }

    class Coordinator: NSObject {
        let onTranslation: (CGFloat) -> Void
        init(onTranslation: @escaping (CGFloat) -> Void) {
            self.onTranslation = onTranslation
        }
        @objc func handleEdgePan(_ sender: UIScreenEdgePanGestureRecognizer) {
            onTranslation(sender.translation(in: sender.view).x)
        }
    }
}

这种封装方式把边缘手势单独放在一个透明UIView上，覆盖在内容视图顶层。手势识别器只在屏幕左边缘约20pt区域触发，不会妨碍内部列表滚动。如果不用UIKit封装，纯SwiftUI方案则需要用DragGesture(minimumDistance: 20, coordinateSpace: .local)并自己判断起点，但准确度不如系统边缘手势。

拖拽过程中还需要处理手势状态。UIScreenEdgePanGestureRecognizer的状态有began、changed、ended，可以在回调中根据状态更新偏移。在ended状态判断速度和位移，决定打开还是关闭。为了避免与系统返回手势冲突，可以把edges设置为.left，并确保只有主界面处于顶层时才激活这个手势。如果抽屉已经打开，再从左边缘滑动应该触发关闭动作，这一点也要在回调中处理。

四、加入弹簧手感与状态同步

动画曲线会直接影响抽屉的质感。spring(response:dampingFraction:)是比较常用的弹簧动画，response控制响应速度，dampingFraction控制回弹幅度。太小的阻尼会让抽屉像果冻一样来回晃动，太大则显得生硬。建议response在0.3到0.45之间，dampingFraction在0.7到0.85之间。交互拖拽时不要给offset添加动画，松手时才使用withAnimation包裹最终状态赋值，这样手指移动和视图位置能够一一对应。

在实际项目里，抽屉的展开状态通常会驱动遮罩、阴影、状态栏样式等。可以用一个枚举或布尔值管理isOpen状态，并让offset与isOpen保持同步。手势过程中根据offset动态计算进度，用来调整遮罩透明度、主界面缩放比例等。例如进度progress = (offset + drawerWidth) / drawerWidth，progress为0时完全关闭，为1时完全展开。把progress应用到主界面的scaleEffect上，可以得到类似iOS Mail的抽屉景深效果。

private var progress: CGFloat {
    (offset + 260) / 260
}

MainContentView()
    .scaleEffect(1 - progress * 0.08)
    .offset(x: progress * 120)
    .animation(.spring(response: 0.35, dampingFraction: 0.8), value: offset)

最后要注意状态一致性问题。当用户快速连续拖拽和点击按钮时，可能出现offset和isOpen不同步。建议把所有改变抽屉状态的入口统一到一个方法里，例如setOpen(_ open: Bool)，内部同时更新offset和isOpen，并用withAnimation包裹。这样无论是按钮点击、边缘拖拽结束、还是遮罩点击，都走同一套状态更新逻辑，避免出现抽屉位置和业务状态不一致的问题。

SwiftUI侧滑菜单抽屉动画边缘拖拽修改时间：2026-10-02 02:08:47