如何在SwiftUI中删除列表左右两侧的填充

Question

我正在使用列表来动态创建视图的多个实例，但是，当使用列表填充时，会在子视图的左侧和右侧添加填充，因此无法删除它。我尝试使用.listRowInset，但是没有产生可见效果。

我创建了一个可以按需工作的PostView。我正在使用“ PostsView”来动态生成多个PostView实例。

我正在尝试在PostView中获取图像以触摸PostsView中的屏幕边缘。

PostView

import SwiftUI



struct PostView: View {
    var post: Post

    var body: some View {

        VStack {
            HStack {
                Text(post.songInfo.album).font(.title)
                Spacer()
                Text(post.songInfo.artist)
            }.padding()

            Image(post.songInfo.albumArtUrl)
                .resizable()
                .aspectRatio(UIImage(named: "sweetner")!.size,  contentMode: .fit)
            HStack {
                Image("plus-icon")
                Spacer()
                Image("comment-icon")
                Spacer()
                Image("headset-icon")
            }.padding()

            HStack {
                Text(post.user.userName)
                Spacer()
                Text(post.textContent)
            }.padding()


        }
    }
}

PostsView

import SwiftUI

struct PostsView: View {
   @ObservedObject var fbVM = FirebaseInfo()

    var body: some View {

       List(fbVM.visiblePosts) { post in
            PostView(post: post)
       }

    }
}

struct PostsView_Previews: PreviewProvider {
    static var previews: some View {
        PostsView()
    }
}

Answer 1

在.listRowInsets构建器内部内部使用List修饰符

var body: some View {
    List {
        Text("String")
            .listRowInsets(EdgeInsets())
    }
}

Answer 2

您似乎可以调整列表本身上的padding来删除开头和结尾的边距。

import SwiftUI

struct PostsView: View {
   @ObservedObject var fbVM = FirebaseInfo()

    var body: some View {

       List(fbVM.visiblePosts) { post in
            PostView(post: post)
       }.padding(.horizontal, -20) // -20 seems to make it go edge to edge

    }
}

struct PostsView_Previews: PreviewProvider {
    static var previews: some View {
        PostsView()
    }
}

您可能还需要调整PostView内的填充，例如这样的文本 Text("Title").font(.title).padding(.leading, -10)这似乎比应该做的要复杂，但似乎可行。