SwiftUI List如何移除默认内边距并禁用滚动回弹效果

1. 移除左侧间距、实现分隔线撑满全宽 #

你可以结合List样式配置和行修饰符实现，不同系统版本适配方式如下：

iOS 15+ 适配代码 #

给List设置 plain 样式移除默认边距，同时给行元素设置内边距和分隔线对齐规则即可：

var names = ["Apple", "Ball", "Cat", "Dog","Egg", "Fox"]
List(names, id:\.self) { name in
    Text(name)
        // 移除行的默认左右内边距，可自定义上下左右间距
        .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
        // 让分隔线左对齐到行的最左侧
        .alignmentGuide(.listRowSeparatorLeading) { viewDimensions in
            viewDimensions[.leading]
        }
}
// 移除List默认分组样式的左侧缩进
.listStyle(.plain)

如果需要完全让分隔线贴到屏幕左右边缘，把listRowInsets的leading和trailing参数都设为0即可。

iOS 13/14 适配方案 #

在App初始化入口（比如App结构体的init方法中）添加全局配置：

init() {
    UITableView.appearance().separatorInset = .zero
    UITableView.appearance().layoutMargins = .zero
    UITableViewCell.appearance().separatorInset = .zero
    UITableViewCell.appearance().layoutMargins = .zero
}

2. 禁用滚动回弹效果 #

iOS 16+ 适配代码 #

直接给List添加滚动回弹行为修饰符即可：

List(names, id:\.self) { name in
    Text(name)
}
// 完全禁用垂直方向的滚动回弹
.scrollBounceBehavior(.never, axes: .vertical)
// 如果希望内容小于List高度时才禁用回弹，替换为下面的写法
// .scrollBounceBehavior(.basedOnSize, axes: .vertical)

iOS 15及更低版本适配方案 #

同样通过全局外观配置实现，在App初始化入口添加：

init() {
    UIScrollView.appearance().bounces = false
}

整合两个需求的完整示例代码（iOS 16+） #

var names = ["Apple", "Ball", "Cat", "Dog","Egg", "Fox"]
List(names, id:\.self) { name in
    Text(name)
        .listRowInsets(EdgeInsets())
        .alignmentGuide(.listRowSeparatorLeading) { $0[.leading] }
}
.listStyle(.plain)
.scrollBounceBehavior(.never, axes: .vertical)

内容的提问来源于stack exchange，提问作者Rahul