SwiftUI - how to avoid row indenting in List when in Edit Mode, but not using onDelete? (code/video attached)

Question

In SwiftUI how can I avoid having row content being indenting in my List when I move into Edit Mode, but not using onDelete? That is currently my row content is indented as this happens, as if the "delete" button will be shown on the left, however I'm not using onDelete so there is no button there.

Animated GIF

Code extract here:

var body: some View {
    VStack{
        List() {
            ForEach(gcTasks) { gcTask in
                HStack {
                    GCTaskRow(withGcTask: gcTask, haha: "")
                }
            }
            // .onDelete(perform: self.deleteTask)   // NOTE: HAVE REMOVED
            .onMove(perform: self.move)
        }
    }
    .environment(\.editMode, listInEditMode ? .constant(.active) : .constant(.inactive))
}

Background - Actually want to move to being in EDIT mode always, i.e. so always have the option of dragging row up/down, however will never use Delete hence want to review all traces of onDelete, in this case being the automatic indentation..

UPDATE: Another example (playgrounds) of how the unwanted indenting is occuring:

import SwiftUI
import PlaygroundSupport

let modelData: [String] = ["Eggs", "Milk", "Bread"]

struct ListTestNoDelete: View {
    private func move(from uiStartIndexSet: IndexSet, to uiDestIndex: Int) {
        print("On Move")
    }
    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(modelData, id: \.self) { str in
                        Text(str)
                    }
                    .onMove(perform: self.move)
                }
                .environment(\.editMode, .constant(.active))
                .navigationBarTitle( Text("Test") )
            }
        }
    }
}


let listTest = ListTestNoDelete()
PlaygroundPage.current.liveView = UIHostingController(rootView: listTest)

Asperi · Accepted Answer · 2020-04-18 06:55:30Z

12

Maybe worth submitting request to Apple, but it is default behaviour. The following workaround is possible for now. Tested with Xcode 11.4 / iOS 13.4.

struct DemoListEditMode: View {

    @State var items = ["a","b","c","d","e"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { z in
                HStack {
                    Image(systemName: "checkmark.square") // just for demo
                    Text("\(z)")
                }
            }.onMove(perform: self.move)
            .listRowInsets(EdgeInsets(top: 0, leading: -24, // workaround !!
                bottom: 0, trailing: 0))                    
        }
        .environment(\.editMode, .constant(.active)) // persistent edit mode
    }

    func move(source: IndexSet, destination: Int) {
        self.items.move(fromOffsets: source, toOffset: destination)
    }
}

answered Apr 18, 2020 at 6:55

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Greg Over a year ago

actually I'm finding with this approach in edit mode that my Image onTapGesture is not picking up when the checkbox is pressed? Image(systemName: gcTask.completed ? "checkmark.square" : "square") .onTapGesture { print("Check box Tapped") self.gcTask.completed.toggle() GCCoreData.save() }

Greg Over a year ago

it seems like once the "leading" value goes more negative than about -8, then the checkbox stops picking up tap gestures...any ideas? (very close re work around)

Joel Fischer Over a year ago

@Greg did you ever find a fix for this? I'm having the same issue. It looks like a hidden UIView overlays that spot.

Serj Rubens Over a year ago

In my case I had to make .environment(\.editMode, .constant(.transient))

Casper Zandbergen · Accepted Answer · 2022-05-25 09:49:13Z

3

Maybe not a very elegant fix but you could extend the List to the left.

List {
    // ...
}
// .padding(.leading, self.isEditing == .inactive ? 0 : -39)
.padding(.leading, self.isEditing ? -45 : 0)

Update:

I created a ListSelectionBoxWidthReader to find the exact selection box width since it seems to be different per device and iOS version. You can find it in this gist: https://gist.github.com/Amzd/2e1c56675109a005f11c77a7f2dbe224

edited May 25, 2022 at 9:49

answered Apr 30, 2020 at 7:56

Casper Zandbergen

3,6872 gold badges28 silver badges50 bronze badges

3 Comments

Greg Over a year ago

thanks - just saw this - this seems to work Casper (with slight adjustment)

Casper Zandbergen Over a year ago

@Greg I think this might scale differently per screen size, in my testing I found 39 to be the closest.

Marcus Rossel Over a year ago

@CasperZandbergen, same here. I found 44 to be perfect for iPhone 11.

aheze · Accepted Answer · 2021-06-06 02:52:43Z

struct ContentView: View  {
    
    /// this is the padding that the list adds in left for delete button when in the edit mode.
    /// I calculated the constant and works fine on iPhone11 but you will need to check for each device separately for accurate offset for every device.
    let listEditModeOffsetX = -UIScreen.main.bounds.width * 0.10647343
    
    @State var modelData: [String] = ["Eggs", "Milk", "Bread","Cake"]
    @State var editingList = false
    
    private func move(from source: IndexSet, to destination: Int) {
        modelData.move(fromOffsets: source, toOffset: destination)
        editingList = false
        print("On Move")
    }
    
    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(modelData, id: \.self) { str in
                        Text(str)
                            .offset(x: self.editingList ? listEditModeOffsetX : 0)
                    }
                    .onMove(perform: self.move)
                    .onLongPressGesture{
                        self.editingList = true
                    }
                    
                }
                .environment(\.editMode, editingList ? .constant(.active):.constant(.inactive))
                .navigationBarTitle( Text("Test") )
            }
        }
    }
}

Collectives™ on Stack Overflow

SwiftUI - how to avoid row indenting in List when in Edit Mode, but not using onDelete? (code/video attached)

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related