如何在SwiftUI中通过拖拽手势将视图缩小至紧凑尺寸？

你现有一个SwiftUI视图结构，希望通过拖拽手势让用户向下拖动视图，使其切换到紧凑状态：

struct MyView: View {
    @State var isCompact = false
    var body: some View {
        VStack {
            Text("顶部文本1")
            Text("顶部文本2")
            if !isCompact { // 紧凑状态下隐藏该文本
                Text("仅展开状态显示的文本")
            }
            Image("示例图片")
                .resizable()
                .frame(height: isCompact ? 80 : 200)
            Text("底部文本")
            Button {
                isCompact.toggle()
            } label: {
                Text("切换状态按钮")
            }
        }
        .padding()
    }
}

当前你使用的手势仅能在拖拽结束后切换isCompact布尔值，无法实现拖拽过程中视图跟随手指移动的交互式效果：

.gesture(DragGesture(minimumDistance: 30)
                .onEnded { value in
                    if !isCompact {
                        if value.translation.height > 0 {
                            withAnimation {
                                isCompact = true
                            }
                        }
                    }
                })

要实现实时交互式拖拽效果，需要结合DragGesture的onChanged方法跟踪拖拽偏移，同时用状态变量控制视图的动态布局，最后在拖拽结束时判断是否触发状态切换。

实现步骤： #

• 添加@State变量记录拖拽偏移量（dragOffset），用于实时调整视图位置
• 在onChanged中更新偏移量，限制拖拽范围（避免过度拖动）
• 在onEnded中根据拖拽距离判断是否切换紧凑状态，同时重置偏移量
• 用offset和animation结合状态变量，实现平滑的拖拽过渡和状态切换

完整代码示例： #

struct MyView: View {
    @State private var isCompact = false
    @State private var dragOffset = CGFloat(0)
    
    // 定义拖拽阈值：超过这个距离就切换到紧凑状态
    private let dragThreshold: CGFloat = 100
    
    var body: some View {
        VStack {
            Text("顶部文本1")
            Text("顶部文本2")
            if !isCompact || dragOffset > 0 { // 拖拽过程中始终显示该文本，直到完成切换
                Text("仅展开状态显示的文本")
                    .opacity(isCompact ? 0 : 1) // 紧凑状态下渐隐
            }
            Image("示例图片")
                .resizable()
                .scaledToFit()
                .frame(height: isCompact ? 80 : 200 - dragOffset) // 拖拽时动态缩小图片高度
            Text("底部文本")
            Button {
                withAnimation(.easeInOut) {
                    isCompact.toggle()
                }
            } label: {
                Text("切换状态按钮")
            }
        }
        .padding()
        .offset(y: isCompact ? 0 : dragOffset) // 拖拽时视图整体向下偏移
        .animation(.easeInOut(duration: 0.2), value: isCompact)
        .gesture(
            DragGesture(minimumDistance: 10)
                .onChanged { value in
                    // 仅在非紧凑状态下允许向下拖拽
                    if !isCompact {
                        // 限制拖拽偏移量，避免过度拖动
                        dragOffset = max(0, value.translation.height)
                    }
                }
                .onEnded { value in
                    withAnimation(.easeInOut) {
                        // 判断拖拽距离是否达到阈值，决定是否切换到紧凑状态
                        if dragOffset > dragThreshold {
                            isCompact = true
                        }
                        // 重置拖拽偏移量
                        dragOffset = 0
                    }
                }
        )
    }
}

关键细节说明： #

• 动态布局调整：通过frame(height:)控制图片高度，结合offset(y:)让视图整体跟随拖拽移动，实现实时交互感
• 拖拽范围限制：用max(0, value.translation.height)确保只能向下拖拽，避免向上拖动
• 平滑过渡：给视图添加animation修饰符，结合withAnimation实现状态切换时的动画效果
• 拖拽过程中的视图可见性：在拖拽时保持展开状态的文本可见，直到完成切换，提升用户体验

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