SwiftUI NavigationView中List如何实现全宽显示并消除顶部外边距

实现方案 #

1. 实现列表项全宽、移除四周灰色边距 #

SwiftUI 的 List 默认采用分组样式自带四周边距，同时每个列表行也有默认左右内边距，做两处修改即可解决：

• 给 List 添加 .listStyle(.plain) 修饰符，移除 List 整体的默认边距
• 给列表行添加 .listRowInsets(EdgeInsets()) 修饰符，消除行的左右留白，让内容撑满全宽

2. 消除 List 顶部多余间距 #

List 默认会预留顶部段头部的高度留白，添加两个修饰符即可清除：

• 给 List 添加 .environment(\.defaultMinListHeaderHeight, 0)，将默认头部最小高度设为0
• 给 List 添加 .listSectionSeparator(.hidden, edges: .top)，隐藏顶部分隔符自带的间距
  如果调整后还有少量残留间距，可以按需给 List 加 .padding(.top, 负值) 微调即可。

另外注意你现有代码里 ProjectsList 中重新初始化了 AuthorizationClass 实例，会导致和父视图的状态不同步，建议改成 @ObservedObject 接收父视图传入的实例即可。

修改后的完整 ProjectsList 代码如下：

struct ProjectsList: View {
    // 改为接收父视图传入的实例，不要新建
    @ObservedObject var authVM: AuthorizationClass

    var body: some View {
        List(authVM.projectObjects){ projectObject in
            NavigationLink(destination: ProjectDetailView(project: projectObject.project)){
                ProjectRowView(project: projectObject.project)
                    .frame(height: 150)
            }
            // 消除列表行默认左右边距
            .listRowInsets(EdgeInsets())
            // 不需要默认行分隔符可以保留这行，不需要就删掉
            .listRowSeparator(.hidden)
        }
        // 移除List默认分组边距
        .listStyle(.plain)
        // 清除顶部默认头部高度
        .environment(\.defaultMinListHeaderHeight, 0)
        // 隐藏顶部分隔符间距
        .listSectionSeparator(.hidden, edges: .top)
        // 如有残留顶部间距可开启下面这行，数值按需调整
        // .padding(.top, -16)
    }
}

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