ios - SwiftUI | 使用 onDrag 和 onDrop 在一个 LazyGrid 中重新排序项目?
问题描述
我想知道是否可以使用View.onDrag
and在其中手动View.onDrop
添加拖放重新排序?LazyGrid
虽然我能够使用 使每个项目都可拖动onDrag
,但我不知道如何实现放置部分。
这是我正在试验的代码:
import SwiftUI
//MARK: - Data
struct Data: Identifiable {
let id: Int
}
//MARK: - Model
class Model: ObservableObject {
@Published var data: [Data]
let columns = [
GridItem(.fixed(160)),
GridItem(.fixed(160))
]
init() {
data = Array<Data>(repeating: Data(id: 0), count: 100)
for i in 0..<data.count {
data[i] = Data(id: i)
}
}
}
//MARK: - Grid
struct ContentView: View {
@StateObject private var model = Model()
var body: some View {
ScrollView {
LazyVGrid(columns: model.columns, spacing: 32) {
ForEach(model.data) { d in
ItemView(d: d)
.id(d.id)
.frame(width: 160, height: 240)
.background(Color.green)
.onDrag { return NSItemProvider(object: String(d.id) as NSString) }
}
}
}
}
}
//MARK: - GridItem
struct ItemView: View {
var d: Data
var body: some View {
VStack {
Text(String(d.id))
.font(.headline)
.foregroundColor(.white)
}
}
}
谢谢!
解决方案
SwiftUI 2.0
这是可能方法的完整简单演示(没有对其进行太多调整,因为代码增长速度与演示一样快)。
要点是: a) 重新排序不假设等待丢弃,因此应动态跟踪;b)为了避免与坐标跳舞,处理网格项目视图的拖放更简单;c) 在数据模型中找到要移动的内容并执行此操作,因此 SwiftUI 会自行为视图设置动画。
使用 Xcode 12b3 / iOS 14 测试
import SwiftUI
import UniformTypeIdentifiers
struct GridData: Identifiable, Equatable {
let id: Int
}
//MARK: - Model
class Model: ObservableObject {
@Published var data: [GridData]
let columns = [
GridItem(.fixed(160)),
GridItem(.fixed(160))
]
init() {
data = Array(repeating: GridData(id: 0), count: 100)
for i in 0..<data.count {
data[i] = GridData(id: i)
}
}
}
//MARK: - Grid
struct DemoDragRelocateView: View {
@StateObject private var model = Model()
@State private var dragging: GridData?
var body: some View {
ScrollView {
LazyVGrid(columns: model.columns, spacing: 32) {
ForEach(model.data) { d in
GridItemView(d: d)
.overlay(dragging?.id == d.id ? Color.white.opacity(0.8) : Color.clear)
.onDrag {
self.dragging = d
return NSItemProvider(object: String(d.id) as NSString)
}
.onDrop(of: [UTType.text], delegate: DragRelocateDelegate(item: d, listData: $model.data, current: $dragging))
}
}.animation(.default, value: model.data)
}
}
}
struct DragRelocateDelegate: DropDelegate {
let item: GridData
@Binding var listData: [GridData]
@Binding var current: GridData?
func dropEntered(info: DropInfo) {
if item != current {
let from = listData.firstIndex(of: current!)!
let to = listData.firstIndex(of: item)!
if listData[to].id != current!.id {
listData.move(fromOffsets: IndexSet(integer: from),
toOffset: to > from ? to + 1 : to)
}
}
}
func dropUpdated(info: DropInfo) -> DropProposal? {
return DropProposal(operation: .move)
}
func performDrop(info: DropInfo) -> Bool {
self.current = nil
return true
}
}
//MARK: - GridItem
struct GridItemView: View {
var d: GridData
var body: some View {
VStack {
Text(String(d.id))
.font(.headline)
.foregroundColor(.white)
}
.frame(width: 160, height: 240)
.background(Color.green)
}
}
编辑
以下是如何在拖放到任何网格项目之外时修复永不消失的拖动项目:
struct DropOutsideDelegate: DropDelegate {
@Binding var current: GridData?
func performDrop(info: DropInfo) -> Bool {
current = nil
return true
}
}
struct DemoDragRelocateView: View {
...
var body: some View {
ScrollView {
...
}
.onDrop(of: [UTType.text], delegate: DropOutsideDelegate(current: $dragging))
}
}
推荐阅读
- javascript - v-如果不更新导航栏
- function - 如何在 Haskell 中编写函数的类型签名
- css - 如何使用 css 创建带有翅膀或标签的 div 框
- mysql - 当表是“productDef”时,为什么 Spring Data / Hibernate 会查询表“product_def”?
- c - 为什么在这种二进制除法的情况下左移商?
- markdown - 使用 Pandoc 将部分分隔符插入 Markdown ePub
- vue.js - Vue.js + Element UI + el-popover - dynamically changing trigger doesn't work
- r - Plotly 在 R 中创建 3D 动画
- python - MicroPython:OSError:[Errno 19] ENODEV
- r - R中两个数据帧的行之间的欧几里得距离