SwiftUI开发中List出现灰色边框无法铺满屏幕是何原因？

问题背景 #

我正在跟随SwiftUI教程学习开发：

• 教程示例的List预期预览效果：
  
• 我编写代码实际运行的List预览效果：
  

当前使用的开发环境为 Xcode 13.3，实现的List自带灰色边框、左右边距，无法像教程示例一样铺满整个屏幕。
对应实现代码如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Text("Hello!")
            Text("Hello, world!")
            Text("Hello, everyone!")
        }
    }
}

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

问题原因 #

这是iOS 15起SwiftUI List默认样式变更导致的。Xcode 13对应的iOS 15+ SDK中，List的默认样式改成了.insetGrouped，也就是你看到的带圆角、左右留边距的卡片式分组效果；而参考的教程是基于更早版本的SDK编写，当时List默认使用.plain样式，默认就是全宽铺满、无额外圆角边距的效果。

解决方法 #

给List显式指定.listStyle(.plain)修饰符即可，修改后的核心代码：

List {
    Text("Hello!")
    Text("Hello, world!")
    Text("Hello, everyone!")
}
.listStyle(.plain)

加完这行修饰符，List就会取消边距和圆角边框，和教程里的全宽效果完全一致。

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