在列表 SwiftUI 中拖放以移动行

Question

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)
        }
    }
}

Answer 1

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))