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

Question

我正在使用List动态创建多个视图实例，但是当使用列表时，子视图左右会添加空白，我无法去除它。我尝试使用.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()
    }
}

- Will Griggers

---

这回答解决了你的问题吗？如何在SwiftUI中删除列表的左右填充？ - Andreas detests censorship

Answer 1

更新

请看这个答案

看起来 .listRowInsets 在使用 content 初始化的 List 中不起作用

如果你稍微改变一下你的代码，就可以实现想要的效果。首先，你需要从帖子视图中移除填充，这样文本就会到达边缘（如果这是你想要的）：

struct PostView: View {
  let placeholder = UIImage(named: "arianaGrande")!
  var post: Post

  var body: some View {
    VStack {
      HStack {
        Text(post.album).font(.title)
        Spacer()
        Text(post.artist)
      }// .padding() -- This padding adds space before "Sweetener and after Ariana Grande

      Image(uiImage: placeholder)
        .resizable()
        .aspectRatio(placeholder.size,  contentMode: .fit)
      HStack {
        Image("plus-icon")
        Spacer()
        Image("comment-icon")
        Spacer()
        Image("headset-icon")
      }.padding()

      HStack {
        Text(post.username)
        Spacer()
        Text(post.textContent)
      }//.padding() -- Same thing here.
    }
  }
}

struct PostView_Previews: PreviewProvider {
  static var previews: some View {
    PostView(post: Post(
      artist: "Ariana Grande",
      album: "Sweetener",
      albumArtUrl: "",
      username: "DoesData",
      textContent: "Text Content"
      )
    )
  }
} 

然后，您可以稍微不同地初始化列表以消除间距。

struct PostsView: View {
  var posts = [
    Post(
      artist: "Ariana Grande",
      album: "Sweetener",
      albumArtUrl: "",
      username: "DoesData",
      textContent: "Text Content"
    )
  ]

  var body: some View {
    List {
      ForEach(posts) { post in
        PostView(post: post)
          .listRowInsets(EdgeInsets())
      }
    }
  }
}

struct Post: Identifiable {
  let id = UUID()
  let artist: String
  let album: String
  let albumArtUrl: String
  let username: String
  let textContent: String
}

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

结果：

原始回答

看起来您可以调整列表本身的填充来去除前导和尾随边距，具体请参考列表填充文档。

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)。这似乎比应该更复杂，但它似乎有效。

- DoesData

---

这不是处理动态填充或可能改变的东西的正确方式。 - Anton Shevtsov

我同意。我已经更新了我的答案，包括一个更好的方法。 - DoesData

这是一个众所周知的解决方法，据我所知它是唯一可行的。感谢您的更新。现在进行点赞。 - Anton Shevtsov

Answer 2

在List构建器内使用.listRowInsets修改器。

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

请注意，似乎.listRowInsets不适用于使用内容初始化的列表中的行。因此，您需要在list内部使用ForEach，例如：

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

- Mojtaba Hosseini

---

当应用于列表视图中时，这似乎没有任何影响。 - Will Griggers

这个答案就是你要找的。 - DoesData