如何阻止SwiftUI中Circle拖拽前出现矩形阴影的抬升效果？

原始代码 #

var example: some View {
    Circle()
        .fill(Color.red)
        .frame(width: 50)
        .draggable(Image(systemName: "circle")) {
            Circle()
                .fill(Color.green)
                .frame(width: 100)
                .contentShape(.dragPreview, Circle())
        }  
}

问题描述 #

当前代码中，红色Circle在拖拽开始前的按压状态下，会出现矩形阴影的抬升效果，而contentShape修饰符仅对拖拽预览生效，无法修改原始视图的按压反馈形状。

状态说明：

• 初始状态：红色圆形，无额外阴影
• 按压未拖拽状态：红色圆形周围出现矩形阴影的抬升效果
• 拖拽状态：绿色大圆形作为预览，阴影匹配圆形形状

解决方法 #

方式一：完全移除按压抬升效果 #

给原始Circle添加.buttonStyle(.plain)修饰符，直接取消系统默认的按压反馈样式：

var example: some View {
    Circle()
        .fill(Color.red)
        .frame(width: 50)
        .buttonStyle(.plain) // 移除默认按压样式
        .draggable(Image(systemName: "circle")) {
            Circle()
                .fill(Color.green)
                .frame(width: 100)
                .contentShape(.dragPreview, Circle())
        }  
}

方式二：让按压阴影匹配圆形形状 #

如果需要保留按压反馈，但让阴影形状和Circle一致，使用.contentShape(.interaction, Circle())将交互区域设置为圆形：

var example: some View {
    Circle()
        .fill(Color.red)
        .frame(width: 50)
        .contentShape(.interaction, Circle()) // 设置交互区域为圆形
        .draggable(Image(systemName: "circle")) {
            Circle()
                .fill(Color.green)
                .frame(width: 100)
                .contentShape(.dragPreview, Circle())
        }  
}

原理说明 #

系统默认的draggable会为视图绑定按钮样式的交互，其交互区域默认是视图的frame（矩形），因此按压时会显示矩形阴影。.buttonStyle(.plain)会移除该按钮的默认样式；.contentShape(.interaction, Circle())则是将交互区域修改为Circle的形状，使按压反馈与视图形状对齐。

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