iosswiftuiswiftui-list

How to enable drag to scroll in SwiftUI List padding area


I notice in the iOS settings menu, all of their lists can be scrolled by dragging in the margins to the sides of the list items. This is only really noticeable on iPads. I'm trying to replicate this behavior. They clearly use Lists and not VStack with ScrollView as they still have all the built in List functionality, like swipeActions and drag to reorder. Does anyone have any idea how they build this functionality? I can add horizontal padding to a List, but I can't figure out a way to make it so you can drag the list by dragging in the padded area. The only way I could figure out to do this was using a VStack with a ScrollView, but then I lose all the List functionality. Anyone know how to do this?


Solution

  • Instead of applying .padding, try applying .contentMargins. For example:

    List {
        ForEach(1..<100) { i in
            Text("Row \(i)")
        }
    }
    .listStyle(.insetGrouped)
    .contentMargins(.trailing, 100) // 👈 here
    

    You can apply different margins to the scroll content and to the scroll indicators by specifying for, for example for: .scrollContent. The default automatic placement applies the same margin to both the content and the indicators, as per the documentation:

    a ScrollView will use this placement to automatically inset both its content and scroll indicators by the specified amount.

    Animation