SwiftUI List出现未知leading/trailing内边距如何去除？

问题描述 #

在SwiftUI List视图中承载可滚动帖子内容时，出现了未手动设置的前后水平内边距，需要让帖子内的图片延伸至屏幕边缘，完全消除两侧空白。
给PostCell设置红色背景后可确认，内边距并非来自PostCell自身：PostCell左右两侧仍存在白色内边距。排查完整视图层级后未找到手动添加的约30pt内边距设置，判断为系统默认添加的内边距。

关联代码 #

根视图（Root View） #

struct RootView: View {
    var body: some View {
        TabView {
            // 其他视图
            // 其他视图
            // 其他视图
            // 其他视图
            ProfileView(profileVM: ProfileViewModel())
        }
    }
}

父视图（Parent View） #

struct ProfileView: View {
    @StateObject var profileVM: ProfileViewModel
    @State private var presentSettings: Bool = false

    var body: some View {
        NavigationView {
                List {
                    ProfileContent(profileVM: profileVM)
                }
                .clipped()
                .listStyle(PlainListStyle())
                .refreshable {
                    Task.detached { await profileVM.loadData() }
                }
                .navigationViewStyle(StackNavigationViewStyle())
                .navigationBarTitle(Text(""), displayMode: .inline)
                .background (
                    NavigationLink("", destination: ListView(profileVM: profileVM), isActive: $profileVM.presentPostView).isDetailLink(false)
                )
        }
    }
}

子视图（Child View） #

struct ListView: View {
    @Environment(\.presentationMode) var presentation
    @ObservedObject var profileVM: ProfileViewModel
        
    var body: some View {
        ScrollViewReader { proxy in
            List(profileVM.usersPosts, id: \.id) { post in
                PostCell(post: post)
                    .background(Color.red)
            }
            .clipped()
            .listStyle(PlainListStyle()) 
            .navigationViewStyle(StackNavigationViewStyle())
            .navigationBarTitle(Text("your posts"), displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    ZStack {
                        Button(action: {print("action")}, label: {Text("Press")})
                    }.padding(.leading, 10)
                }
            })
        } 
    }
}

解决方法 #

两侧空白是iOS 15及以上系统中List默认给行内容添加的水平内边距，即使使用PlainListStyle也不会自动移除，按以下步骤修改即可：

• 给List内的每一行添加.listRowInsets(EdgeInsets())，清除系统默认的行内边距
• 适配iOS 16及以上版本时，额外给List添加.contentMargins(.horizontal, 0, for: .scrollContent)，清除系统新增的滚动内容水平默认边距，同时可按需设置.listRowSpacing(0)清除默认行间距

修改后的子视图核心代码如下（可直接运行）：

struct ListView: View {
    @Environment(\.presentationMode) var presentation
    @ObservedObject var profileVM: ProfileViewModel
        
    var body: some View {
        ScrollViewReader { proxy in
            let postList = List(profileVM.usersPosts, id: \.id) { post in
                PostCell(post: post)
                    .background(Color.red)
                    .listRowInsets(EdgeInsets()) // 清除单行默认内边距
            }
            .clipped()
            .listStyle(PlainListStyle()) 
            .navigationViewStyle(StackNavigationViewStyle())
            .navigationBarTitle(Text("your posts"), displayMode: .inline)
            .navigationBarBackButtonHidden(true)
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    ZStack {
                        Button(action: {print("action")}, label: {Text("Press")})
                    }.padding(.leading, 10)
                }
            })
            
            if #available(iOS 16.0, *) {
                postList
                    .listRowSpacing(0)
                    .contentMargins(.horizontal, 0, for: .scrollContent)
            } else {
                postList
            }
        } 
    }
}

提示：如果父视图中的List也存在同类边距问题，给对应List和行添加相同修饰符即可；PostCell内需要撑满屏幕的元素要设置maxWidth: .infinity，不要给元素本身添加水平方向padding。

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