SwiftUI如何移除导航链接列表左侧内边距？

问题描述 #

我正在开发一款SwiftUI应用，其中有一个由图片组成的导航链接列表，希望图片能占满屏幕宽度，但列表左侧始终存在内边距。已尝试设置.frame(maxWidth: .infinity)、.ignoresSafeArea()和.listStyle(PlainListStyle())，但问题仍未解决。

问题截图：列表左侧存在明显内边距，图片未撑满屏幕宽度

核心修复方案 #

关键修改步骤 #

• 完全清除List的行内边距，调整导航链接和内部视图的布局优先级
• 配置图片自适应父视图空间，确保填充宽度
• 移除多余的安全区忽略调用，仅在必要场景使用

修改后的完整代码示例 #

NavigationView {
    VStack(spacing: 20) { // 用spacing替代负padding，布局更稳定
        Text("Available guides in: ")
            .font(.custom("SF Mono-Light", size: 28))
            .padding(.top, 100)
        
        Text("Somewhere")
            .font(.custom("SF Mono-Light", size: 32))
        
        List(guides) { guide in
            NavigationLink(
                destination: GuideView(guideSessionManager: GuideSessionManager(guide: guide)),
                tag: guide.guideName,
                selection: $selection
            ) {
                Button(action: {
                    selection = guide.guideName
                }) {
                    Image(guide.imageName)
                        .renderingMode(.original)
                        .resizable() // 开启图片缩放能力
                        .scaledToFill() // 填充父视图，保持比例
                        .frame(maxWidth: .infinity, maxHeight: .infinity) // 撑满按钮可用空间
                }
                .buttonStyle(GrowingButtonImage())
                .frame(maxWidth: .infinity)
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) // 清除行内边距
            .listRowSeparator(.hidden) // 可选：隐藏列表分隔线
        }
        .listStyle(PlainListStyle())
        .edgesIgnoringSafeArea(.horizontal) // 仅水平方向忽略安全区，避免垂直布局混乱
    }
}

修改说明 #

1. 清除行内边距：明确设置.listRowInsets为全0，彻底移除List行的默认内边距
2. 图片自适应配置：添加.resizable()和.scaledToFill()，让图片能根据父视图大小缩放并填充宽度，保持比例（若需拉伸填充可改用.scaledToFit()）
3. 优化安全区设置：仅在List上添加水平方向的安全区忽略，避免全局忽略导致的布局偏移
4. 替换负padding：用VStack的spacing属性替代原有的负padding，解决布局不稳定问题

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