Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drag and drop to move row in List SwiftUI

I'm working with List in SwiftUI. I want to add feature of drag and drop row(items) in List. In Swift we have UITableView's Delegate and DataSource methods like below:

- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;

What is the alternative of these method in SwiftUI?

struct User {
    var firstName: String
    var lastName: String
}

struct UserRow: View {
    var user: User

    var body: some View {
        Text("\(user.firstName) \(user.lastName)")
    }
}

struct ContentView : View {
    var body: some View {

        let user1 = User(firstName: "Anjali", lastName: "User1")
        let user2 = User(firstName: "XYZ", lastName: "User2")

        return List {
            UserRow(user: user1)
            UserRow(user: user2)
        }
    }
}
like image 644
Anjali Kevadiya Avatar asked Jul 17 '19 17:07

Anjali Kevadiya


People also ask

How do I edit a List in SwiftUI?

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.

How do I move items in SwiftUI?

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.

Is SwiftUI drag and drop?

This library supports drag-and-drop in SwiftUI code. This is a replacement for the native onDrag / onDrop and their limitations.

How do I create a custom List in SwiftUI?

To begin, create a SwiftUI Xcode project, and create a struct , namely, Data . Let's get back in our ContentView. swift and populate some values into this struct . Now, inside your view, create a List, and use ForEach to add and see all your data in list form.


1 Answers

In the WWDC there is a video that explain briefly how to activate edit mode on a list and how to move items.

You can use the onMove modifier to handle cell reordering, and the EditButton() to activate the edit mode, which allows you to move cells manually.

Note that you can't use the onMove method on a static list. This modifier is available in the DynamicViewContent protocol, which is implemented by ForEach, but not by List.

struct ContentView : View {
    let users = [
        User(firstName: "Anjali", lastName: "User1"),
        User(firstName: "XYZ", lastName: "User2")
    ]

    var body: some View {
        NavigationView {
            List {
                ForEach(users.identified(by: \.firstName)) { user in
                    UserRow(user: user)
                }.onMove(perform: move)
            }
            .navigationBarTitle(Text("Users"))
            .navigationBarItems(trailing: EditButton())
        }
    }

    func move(from source: IndexSet, to destination: Int) {
        users.move(fromOffsets: source, toOffset: destination)
    }
}

To make it always draggable without EditButton just add this modifier to your List:

.environment(\.editMode, Binding.constant(EditMode.active))
like image 94
rraphael Avatar answered Oct 16 '22 02:10

rraphael