SwiftUI拖拽预览过度缩小，如何保持原尺寸？

问题原因 #

这不是SwiftUI的内置效果，而是因为动态布局的视图在拖拽预览环境中缺少父容器的尺寸约束。原视图依赖HStack、Spacers等组件撑满屏幕宽度，但预览视图默认是孤立的，会自动收缩到内容本身的最小尺寸，导致看起来大幅缩小。

解决方案 #

核心思路是捕获原视图的实际渲染尺寸，然后强制预览视图使用这个尺寸，具体步骤如下：

1. 定义PreferenceKey捕获视图尺寸 #

用PreferenceKey来获取拖拽项的实际渲染尺寸：

struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

2. 在拖拽视图中捕获并应用尺寸 #

通过GeometryReader和PreferenceKey实时获取视图大小，再将尺寸传递给预览视图：

struct DraggableItem: View {
    @State private var itemSize: CGSize = .zero
    
    // 抽离拖拽项内容，避免重复代码
    private var contentView: some View {
        HStack {
            Text("动态布局拖拽项")
            Spacer()
            Image(systemName: "arrow.up.right")
        }
        .padding()
        .background(Color.gray.opacity(0.2))
        .cornerRadius(8)
    }
    
    var body: some View {
        contentView
            // 捕获视图实际尺寸
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: ViewSizeKey.self, value: proxy.size)
                }
            )
            .onPreferenceChange(ViewSizeKey.self) { newSize in
                itemSize = newSize
            }
            .onDrag {
                // 替换为你的拖拽数据
                NSItemProvider(object: "DragData" as NSString)
            } preview: {
                // 强制预览视图使用原尺寸
                contentView
                    .frame(width: itemSize.width, height: itemSize.height)
                    .fixedSize(horizontal: true, vertical: true)
            }
    }
}

3. 特殊场景处理（如ScrollView内） #

如果拖拽项在ScrollView中，GeometryReader可能会获取到容器尺寸而非视图本身，这时需要指定坐标空间：

// 在父容器添加坐标空间
ScrollView {
    DraggableItem()
}
.coordinateSpace(name: "ScrollViewParent")

// 修改DraggableItem中的GeometryReader：
GeometryReader { proxy in
    Color.clear
        .preference(key: ViewSizeKey.self, value: proxy.frame(in: .named("ScrollViewParent")).size)
}

关键说明 #

• fixedSize(horizontal: true, vertical: true) 确保预览视图不会被系统压缩到更小尺寸
• 抽离contentView可以避免重复编写视图代码，维护更方便
• 捕获的尺寸是视图的实际渲染尺寸，会自动适配不同屏幕和布局变化

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