SwiftUI列表渲染异常：相同实现的列表边距、分隔线长度不一致

这种代码结构几乎完全一致、但列表行左右边距、分隔线长度出现明显差异的问题，是SwiftUI List组件非常普遍的渲染异常，属于iOS开发中的高频踩坑点。

你提到的相似实现的参考代码如下：

var body: some View {
    NavigationView {
        List {
            ForEach(self.tvm.filteredTrucks, id:\.id) { truck in
                NavigationLink (destination: TruckDetail(truck: truck)) {
                    TruckListItem(truck: truck, truckLogos: tvm.truckLogos)
                }
            }
        }
    }
}

核心触发逻辑 #

这类边距差异绝大多数情况来自SwiftUI List的内置自适应布局规则，和自定义TruckListItem内部写的边距、尺寸代码没有关系。
系统对List行的边距计算，会根据行结构的嵌套层级自动动态调整：

• 当行结构完全符合系统默认布局层级（也就是List -> ForEach -> NavigationLink -> 自定义行视图的三层固定结构，没有额外嵌套容器、没有手动覆写行相关配置）时，系统会自动压缩行的左右安全边距，让内容更贴近屏幕水平边缘，分隔线也会从贴近屏幕边缘的位置开始延伸
• 只要任意一处代码打破了这个默认层级结构，系统就会自动给所有行补上标准16pt的内置边距，分隔线也会对应向内缩进固定长度

最高频的踩坑场景 #

• 混用List样式：两个相似视图里，一个列表用了默认的.plain样式，另一个随手加了.grouped/.insetGrouped样式，不同List样式的边距计算基准完全不同，是最容易被遗忘的差异点
• 行修饰打断布局传递：给其中一个List的行加了任意一个和行布局相关的修饰，比如.listRowInsets()、.listRowBackground()、单独给行套了一层额外的VStack/ZStack容器、给自定义行视图加了全局padding，系统就会判定你要自定义行布局，自动切换到带大边距的布局模式
• 外层导航容器不统一：一个页面用的是iOS13-15时代的旧版NavigationView，另一个页面用了iOS16+推出的NavigationStack，两个导航容器对内部List的边距计算逻辑完全不通用，哪怕List本身的代码一字不差，渲染出来的边距也会有明显差异
• NavigationLink的结构被改动：把NavigationLink的标签视图抽进了自定义行结构体内部、给NavigationLink加了空的标签初始化、给NavigationLink套了额外的样式修饰，都会触发边距的自适应偏移

快速解决步骤 #

1. 逐行对比两个相似列表的完整代码链路：从List本身的样式配置、到每行添加的所有修饰、再到外层的导航容器配置，把有差异的修饰项逐个注释排查，定位到触发边距偏移的具体代码
2. 如果需要强制统一列表边距，不要依赖系统的默认自适应行为，给所有列表行加统一的显式配置：
   • 统一使用同一种List样式，不要在相似页面混用不同的listStyle
   • 给每行加 .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) 强制清除系统自动添加的边距
   • 严格保持List行的嵌套层级，不要在NavigationLink和自定义行视图之间套额外的容器视图，避免打断系统的布局传递

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