如何让SwiftUI中的List组件实现全宽显示？

问题原因 #

SwiftUI 中的 List 控件默认自带两个层级的预留边距：一是列表整体的默认样式边距，二是每一行 Cell 的内置内边距，仅给 List 添加 maxWidth: .infinity 无法消除这两个默认边距，所以会出现留白问题。

适配方案 #

方案1：iOS 15+ 适配（推荐） #

直接修改 List 样式和行内边距即可，修改后的完整代码如下：

struct ViewModel: Identifiable {
    let title: String
    let id = UUID()
}

struct ContentView: View {
    
    let models = [
        ViewModel(title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
        ]
    
    var body: some View {
        List(models, id: \.id) { model in
            Text(model.title)
                .frame(maxWidth: .infinity, alignment: .leading)
                // 消除行的默认内边距
                .listRowInsets(EdgeInsets())
        }
        // 切换为Plain样式消除列表自带的额外边距
        .listStyle(.plain)
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案2：兼容iOS 13/14版本 #

如果需要支持更早的系统版本，仅需把 listStyle 的参数替换为老版本写法即可，其余代码和方案1完全一致：

.listStyle(PlainListStyle())

原代码的效果如下：

修改后 List 即可完全占满屏幕宽度，没有左右留白。

内容的提问来源于stack exchange，提问作者Dr. Mr. Uncle