How can I add drag and drop to reorder rows on SwiftUI? Just a clean solution without 'Edit mode'. Here an example:
UPDATE
I asked this question on The SwiftUI Lab and the author replied with this code. Only works on iPad
import SwiftUI
struct Fruit: Identifiable {
let id = UUID()
let name: String
let image: String
}
struct ContentView: View {
@State var selection: Set<UUID> = []
@State private var fruits = [
Fruit(name: "Apple", image: "apple"),
Fruit(name: "Banana", image: "banana"),
Fruit(name: "Grapes", image: "grapes"),
Fruit(name: "Peach", image: "peach"),
Fruit(name: "Kiwi", image: "kiwi"),
]
var body: some View {
VStack {
NavigationView {
List(selection: $selection) {
ForEach(fruits) { fruit in
HStack {
Image(fruit.image)
.resizable()
.frame(width: 30, height: 30)
Text(fruit.name)
}
}
.onMove { _, _ in }
}
.navigationBarTitle("Fruits (Top)")
}
}
}
}
In SwiftUI it's easy to enable the ability for users to move items in a List. Here's an example I took from Paul Hudson's site. If you have a List based on a simply array then all you have to do is add the . onMove modifier to your ForEach and pass it your closure that does the move.
If you have configured a SwiftUI list view to support deletion or editing of its items, you can allow the user to toggle editing mode for your list view by adding an EditButton somewhere. When that is run, you'll find you can tap the edit button to enable or disable editing mode for the items in the list.
Probably the simplest way to build a list is to create a new SwiftUI view and wrap the Hello World text in a List: struct StaticListView: View { var body: some View { List { Text("Hello, world!") } } } To add more items to the list, we can just add another line: List { Text("Hello, world!") Text("Hello, SwiftUI!") }
To put the list in the edit mode when the user long presses an item, you can use a state flag and set the edit environment value accordingly. It is important to make the flag changes animated in order not to look very weird.
struct ContentView: View {
@State private var fruits = ["Apple", "Banana", "Mango"]
@State private var isEditable = false
var body: some View {
List {
ForEach(fruits, id: \.self) { user in
Text(user)
}
.onMove(perform: move)
.onLongPressGesture {
withAnimation {
self.isEditable = true
}
}
}
.environment(\.editMode, isEditable ? .constant(.active) : .constant(.inactive))
}
func move(from source: IndexSet, to destination: Int) {
fruits.move(fromOffsets: source, toOffset: destination)
withAnimation {
isEditable = false
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With