SwiftUI开发Mac端可拖拽瓦片式仪表盘的技术需求问询

一、多尺寸瓦片的网格布局实现 #

利用SwiftUI的LazyVGrid可快速实现支持不同尺寸瓦片的网格布局，通过gridCellColumns和gridCellRows控制每个瓦片占据的网格单元数：

1. 定义瓦片模型与尺寸枚举

// 瓦片尺寸枚举，对应不同网格占比
enum TileSize {
    case small  // 1列 × 1行
    case medium // 2列 × 1行
    case large  // 2列 × 2行
}

// 瓦片数据模型
struct WidgetTile: Identifiable {
    let id = UUID()
    let title: String
    let size: TileSize
}

2. 构建自适应网格布局
   结合GeometryReader实现屏幕宽度自适应的列数，避免固定列数在不同尺寸Mac窗口下的适配问题：

@State private var widgets: [WidgetTile] = [
    WidgetTile(title: "系统监控", size: .large),
    WidgetTile(title: "CPU使用率", size: .small),
    WidgetTile(title: "内存状态", size: .small),
    WidgetTile(title: "网络流量", size: .medium)
]

var body: some View {
    GeometryReader { geometry in
        // 根据窗口宽度动态计算列数（基础单元格宽度150，间距20）
        let columnCount = max(2, Int(geometry.size.width / 170))
        let columns = Array(repeating: GridItem(.flexible(minimum: 150), spacing: 20), count: columnCount)
        
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(widgets) { widget in
                // 自定义瓦片视图（示例用Text替代）
                Text(widget.title)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.gray.opacity(0.1))
                    .cornerRadius(12)
                    // 设置瓦片占据的网格单元数
                    .gridCellColumns(widget.size == .medium || widget.size == .large ? 2 : 1)
                    .gridCellRows(widget.size == .large ? 2 : 1)
            }
        }
        .padding()
    }
}

二、iOS小组件风格的拖拽交互实现 #

通过SwiftUI的onDrag和DropDelegate实现瓦片的拖拽排序，核心是传递瓦片ID并更新数据源顺序：

1. 为瓦片添加拖拽能力
   在瓦片视图上添加onDrag修饰符，将瓦片ID作为拖拽数据：

Text(widget.title)
    // ... 之前的修饰符
    .onDrag {
        // 将瓦片ID转为字符串作为拖拽数据
        NSItemProvider(object: widget.id.uuidString as NSString)
    }
    .onDrop(of: [.text], delegate: TileDropDelegate(item: widget, items: $widgets))

2. 自定义拖拽代理处理排序逻辑
   实现DropDelegate来处理拖拽进入、离开和完成时的操作，更新瓦片数组的顺序：

class TileDropDelegate: DropDelegate {
    let currentItem: WidgetTile
    @Binding var items: [WidgetTile]
    
    init(item: WidgetTile, items: Binding<[WidgetTile]>) {
        self.currentItem = item
        self._items = items
    }
    
    // 处理拖拽完成后的逻辑
    func performDrop(info: DropInfo) -> Bool {
        guard let provider = info.itemProviders(for: [.text]).first else { return false }
        
        provider.loadObject(ofClass: NSString.self) { [weak self] object, error in
            guard let self = self,
                  let draggedIdString = object as? String,
                  let draggedItem = self.items.first(where: { $0.id.uuidString == draggedIdString }) else {
                return
            }
            
            DispatchQueue.main.async {
                // 移除被拖拽的瓦片
                self.items.removeAll(where: { $0.id == draggedItem.id })
                // 将其插入到当前瓦片的位置
                if let index = self.items.firstIndex(where: { $0.id == self.currentItem.id }) {
                    self.items.insert(draggedItem, at: index)
                }
            }
        }
        return true
    }
    
    // 可选：添加拖拽时的视觉反馈（比如高亮当前瓦片）
    func dropEntered(info: DropInfo) {
        // 这里可以给currentItem添加高亮效果
    }
    
    func dropExited(info: DropInfo) {
        // 移除高亮效果
    }
}

额外优化建议 #

• 拖拽视觉反馈：可在dropEntered和dropExited中修改瓦片背景色或添加边框，提升交互体验；
• 瓦片高度适配：对large尺寸瓦片设置最小高度，避免内容拉伸变形；
• 持久化布局：将瓦片顺序和位置存储到UserDefaults或Core Data，下次启动时恢复用户自定义布局。

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