SwiftUI List在iPhone Pro与Pro Max设备中内边距表现不一致问题

问题详情 #

我实现了一个带背景图片和文本的SwiftUI List，代码如下：

List {
    Section {
        NavigationLink {
            Color.red
        } label: {
            Text("Background")
                .foregroundColor(.white)
                .frame(height: 48)
        }
        .foregroundStyle(.white)
        .background {
            Image("Mist")
        }
    }
}

但在iPhone 15 Pro和15 Pro Max上渲染效果不一致：15 Pro显示正常，15 Pro Max的背景图片会多出无法移除的内边距，iPhone 14系列的Pro和Pro Max也存在同样问题。

差异原因 #

这种现象是SwiftUI针对不同尺寸Pro设备的默认布局适配导致的：

• 大屏的Pro Max设备，List的Section和列表行默认会应用更宽的水平内边距，适配大屏的视觉比例；
• 原代码中NavigationLink的label只设置了高度，没有填充整个行宽，导致背景视图的范围被限制在label的宽度内；
• 系统对不同屏幕尺寸的布局优先级计算有差异，进一步放大了内边距的显示区别。

解决方法 #

要让背景图片在所有设备上铺满整行，按以下步骤修改代码：

1. 清除列表行的默认内边距 #

给NavigationLink添加.listRowInsets(EdgeInsets())，移除系统自带的行内边距。

2. 让Label填充整个行宽 #

修改label的frame，设置maxWidth: .infinity，确保文本视图占满整个行的宽度，同时保留原有的高度设置。另外添加.contentShape(Rectangle())保证整个行都能响应点击。

3. 配置背景图片的缩放与裁剪 #

给背景图片加上.resizable()、.scaledToFill()和.clipped()，确保图片铺满背景区域，超出部分自动裁剪。

修改后的完整代码：

List {
    Section {
        NavigationLink {
            Color.red
        } label: {
            Text("Background")
                .foregroundColor(.white)
                .frame(maxWidth: .infinity, height: 48)
                .contentShape(Rectangle())
        }
        .foregroundStyle(.white)
        .listRowInsets(EdgeInsets())
        .background {
            Image("Mist")
                .resizable()
                .scaledToFill()
                .clipped()
        }
    }
    .listSectionSeparator(.hidden) // 可选：隐藏Section分隔线，视觉更统一
}
.listStyle(.plain) // 可选：设置plain风格，避免额外的Section布局影响

替代方案（iOS 16+） #

使用.listRowBackground()替代直接给NavigationLink加背景，系统对这个API的布局处理更稳定：

List {
    Section {
        NavigationLink {
            Color.red
        } label: {
            Text("Background")
                .foregroundColor(.white)
                .frame(maxWidth: .infinity, height: 48)
                .contentShape(Rectangle())
        }
        .foregroundStyle(.white)
        .listRowInsets(EdgeInsets())
        .listRowBackground(
            Image("Mist")
                .resizable()
                .scaledToFill()
                .clipped()
        )
    }
}
.listStyle(.plain)

内容的提问来源于stack exchange，提问作者haven-way