SwiftUI实现苹果「查找」App上滑视图的技术咨询

实现原理 #

这个上滑视图的核心是拖拽交互驱动的多阶段弹窗组件，底层逻辑围绕以下几点展开：

1. 拖拽手势响应：监听垂直拖拽手势，实时将拖拽偏移量转换为视图Y轴位置的动态变化
2. 锚点吸附机制：预设多个关键停留位置（底部收起、半展开、全展开），拖拽结束时根据当前偏移量自动吸附到最近的锚点，保证交互的稳定性
3. 视觉层级联动：视图弹出时同步添加背景半透明遮罩，拖拽过程中遮罩透明度随视图位置同步变化，强化弹窗的层级感
4. 滚动交互联动：当视图处于全展开状态时，内部列表滚动到顶部后，继续拖拽会触发视图整体下滑收起，实现连贯的交互体验

可参考的技术方向 #

1. SwiftUI原生API实现（iOS 16+） #

直接利用Sheet组件的presentationDetents属性，原生支持多阶段停留的底部弹窗，完全适配系统交互规范，代码量少：

struct ContentView: View {
    @State private var showBottomSheet = false
    
    var body: some View {
        Button("唤起上滑视图") {
            showBottomSheet = true
        }
        .sheet(isPresented: $showBottomSheet) {
            BottomSheetContentView()
                .presentationDetents([.height(220), .medium, .large])
                .presentationDragIndicator(.visible)
        }
    }
}

2. 自定义拖拽手势实现 #

如果需要兼容iOS 16以下版本或个性化交互，直接基于DragGesture封装自定义视图：

• 通过@State管理视图的偏移量和展开状态
• 拖拽过程中实时计算偏移量，配合withAnimation实现平滑过渡
• 拖拽结束时判断偏移量，自动切换到对应锚点位置

3. UIKit桥接适配（旧版本兼容） #

通过UIViewRepresentable将UIKit的自定义弹窗桥接到SwiftUI：

• 使用UIPresentationController自定义转场动画和交互逻辑
• 利用UIPanGestureRecognizer处理拖拽手势，动态调整容器视图的frame实现位置变化

4. 第三方库参考 #

可以参考成熟的底部弹窗类库的实现逻辑，这类库通常封装了手势处理、锚点吸附、滚动联动等细节，适合快速集成，核心思路是自定义容器视图管理拖拽状态与视图位置。

内容的提问来源于stack exchange，提问作者SwiftUI_Max