SwiftUI中如何使.draggable拖拽预览与原视图一致？

问题原因 #

你遇到的预览视图尺寸异常，核心原因是拖拽预览的布局上下文完全独立于原视图：

• 原视图中的Color.frame(height:100)能充满VStack宽度，是因为VStack默认会让子视图填充可用水平空间；但拖拽预览没有父容器提供宽度约束，Color作为无固有尺寸的视图，会自动收缩到最小宽度。
• 高度超出设置的100，是因为系统的拖拽预览容器会默认添加额外内边距，导致最终显示高度被拉伸。

而且系统的拖拽预览有自身的布局优先级，直接设置frame无法完全覆盖系统默认规则。

解决方案：让预览与原视图尺寸完全一致 #

要实现预览和原视图视觉完全一致，需先捕获原视图的实际尺寸，再将尺寸应用到预览视图上。可以通过GeometryReader获取原视图尺寸，结合状态变量传递给预览：

@State private var items: [Color] = [.red, .blue, .green, .orange, .purple]
@State private var dragPreviewSize: CGSize = .zero

var body: some View {
  VStack(spacing: 16) {
    ForEach(items, id: \.self) { color in
      color
        .frame(height: 100)
        .background(
          // 捕获原视图的实际尺寸
          GeometryReader { proxy in
            Color.clear
              .onAppear {
                dragPreviewSize = proxy.size
              }
          }
        )
        .draggable(color) {
          // 应用捕获到的尺寸到预览视图
          color
            .frame(width: dragPreviewSize.width, height: dragPreviewSize.height)
            .clipped() // 抵消系统内边距导致的拉伸
        }
    }
  }
  .padding()
}

如果要更精准同步原视图的所有视觉效果（如阴影、圆角等），可以将原视图内容封装为可复用子视图，同时用于原视图和拖拽预览：

@State private var items: [Color] = [.red, .blue, .green, .orange, .purple]
@State private var dragPreviewSize: CGSize = .zero

// 复用的子视图
private func colorItemView(_ color: Color) -> some View {
  color
    .frame(height: 100)
    .cornerRadius(8) // 示例：添加圆角效果
}

var body: some View {
  VStack(spacing: 16) {
    ForEach(items, id: \.self) { color in
      colorItemView(color)
        .background(
          GeometryReader { proxy in
            Color.clear
              .onAppear {
                dragPreviewSize = proxy.size
              }
          }
        )
        .draggable(color) {
          colorItemView(color)
            .frame(width: dragPreviewSize.width, height: dragPreviewSize.height)
            .clipped()
        }
    }
  }
  .padding()
}

额外说明 #

如果希望实现“拖拽原视图本身”的视觉效果，还可以结合opacity和offset，在拖拽时隐藏原视图并让预览跟随手势，但这需要配合完整的onDrag+onDrop交互逻辑；仅从预览一致性需求来看，上面的方法已经足够解决问题。

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