SwiftUI中如何实现List内边距区域的拖拽滚动功能

我完全懂你说的iPad上iOS设置里的那种List滚动体验！侧边空白区域也能拖动滚动的手感确实很顺手，而且还不想丢了List自带的swipeActions、拖拽排序这些核心功能对吧？我之前也研究过这个问题，找到了一个完全基于SwiftUI原生API的解决方案，不用折腾UIKit包装，还能完美还原系统的效果。

核心思路是让List本身占满屏幕宽度，然后给列表项设置左右内边距，而不是直接给List加padding。这样List的触摸区域是整个屏幕，包括左右的空白区域，拖动这些区域自然就能触发滚动，同时List的所有原生功能都能保留。

下面是完整的实现代码：

struct EdgeScrollableList: View {
    @State private var items = Array(1...50).map { "设置选项 \($0)" }
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                // 自定义列表项内容
                Text(item)
                    .font(.system(size: 16))
                    .padding(.vertical, 12)
                    // 保留侧滑操作功能
                    .swipeActions(edge: .trailing) {
                        Button("删除") {
                            if let index = items.firstIndex(of: item) {
                                items.remove(at: index)
                            }
                        }
                        .tint(.red)
                    }
            }
            // 保留拖拽排序功能
            .onMove(perform: moveItems)
            // 给每行设置左右内边距，营造List有侧边空白的视觉效果
            .listRowInsets(EdgeInsets(top: 0, leading: 40, bottom: 0, trailing: 40))
            // 让行分隔线和内容对齐（可选）
            .listRowSeparator(.visible, edges: .bottom)
        }
        // 让List占满屏幕宽度，确保触摸区域覆盖全屏
        .frame(maxWidth: .infinity)
        // 设置和系统一致的背景色，避免左右空白区域颜色断层
        .background(Color(UIColor.systemBackground))
        // 隐藏默认的导航栏间距（按需选择）
        .navigationBarTitleDisplayMode(.inline)
    }
    
    // 拖拽排序的逻辑实现
    private func moveItems(from source: IndexSet, to destination: Int) {
        items.move(fromOffsets: source, toOffset: destination)
    }
}

关键细节说明： #

• .listRowInsets：给每个列表项设置左右内边距，视觉上模拟List整体有侧边空白的效果，而不是真的给List加外层padding。
• .frame(maxWidth: .infinity)：让List的宽度铺满整个屏幕，这样它的触摸区域就覆盖了屏幕左右的空白区域，拖动这些区域就能触发滚动。
• 背景色设置：确保List的背景色和系统背景一致，避免左右空白区域出现颜色不一致的问题。
• 所有原生功能（swipeActions、拖拽排序）都能正常使用，因为我们没有修改List的底层结构，只是调整了布局和触摸区域。

如果需要适配不同设备（比如iPad用更大的内边距，iPhone用小一点的），可以结合GeometryReader获取屏幕尺寸动态计算内边距值，或者用UIDevice.current.userInterfaceIdiom判断设备类型来设置不同的listRowInsets。

内容来源于stack exchange