如何在Vision Pro中高亮被注视的SwiftUI可拖拽元素？

要给Vision Pro里的可拖拽元素添加注视时的视觉提示，核心是借助SwiftUI的焦点状态结合focusable修饰符，通过注视触发元素焦点变化，动态调整UI样式来模拟“悬停”效果。以下是适配你现有代码的实现方案：

import SwiftUI
import UniformTypeIdentifiers

struct DraggableCardView: View {
    // 跟踪元素是否被注视（获得焦点）
    @FocusState private var isFocused: Bool
    
    var body: some View {
        HStack {
            // 自定义内容，比如文本或图标
            Text("可拖拽元素")
                .foregroundColor(.white)
                .font(.headline)
        }
        .padding(10)
        .background(
            RoundedRectangle(cornerRadius: 8)
                // 根据焦点状态切换背景透明度，提供视觉反馈
                .foregroundColor(isFocused ? Color.blue.opacity(0.6) : Color.blue.opacity(0.3))
        )
        // 添加边框强化焦点状态（可选）
        .border(isFocused ? Color.blue.opacity(0.8) : .clear, width: 2)
        // 轻微缩放增强感知（可选）
        .scaleEffect(isFocused ? 1.05 : 1.0)
        .animation(.easeInOut(duration: 0.2), value: isFocused)
        // 开启焦点支持，绑定状态变量
        .focusable($isFocused)
        .onDrag {
            let itemProvider = NSItemProvider(object: "YourDraggedData" as NSItemProviderWriting)
            return itemProvider
        }
        .onDrop(of: [UTType.text], isTargeted: nil) { providers, location in
            // 处理放置逻辑
            return true
        }
    }
}

关键逻辑说明 #

• 焦点状态绑定：@FocusState变量isFocused会在用户注视元素时自动变为true，移开注视后恢复为false
• 视觉反馈定制：通过动态调整背景色透明度、添加边框或缩放效果，让用户清晰感知元素已被注视且可拖拽
• 动画过渡：添加animation修饰符让状态切换更平滑，符合Vision Pro的空间交互体验
• 兼容原有逻辑：完全保留你已实现的onDrag和onDrop功能，不影响拖拽核心流程

你可以根据需求调整颜色、动画时长或反馈样式，比如替换边框为阴影，或者调整缩放比例，让提示效果更贴合你的应用风格。

内容的提问来源于stack exchange，提问作者János