swift - 如何在 SwiftUI 中删除列表左侧和右侧的填充

Question

这个问题在这里已经有了答案:





How to remove the left and right Padding of a List in SwiftUI?

(8 个回答)


去年关闭。




我正在使用列表来动态创建 View 的多个实例，但是，当使用列表填充时， subview 的左侧和右侧添加了我无法删除它。我试过使用 .listRowInset，但这并没有产生明显的效果。

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

我试图让 PostView 中的图像触摸 PostsView 中的屏幕边缘。

帖子查看

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()


        }
    }
}

帖子查看

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

更新
看看this answer

It looks like .listRowInsets doesn't work for rows in a List that is initialised with content

因此，如果您稍微更改代码，就可以执行此操作。首先，您需要从帖 subview 中删除填充，以便文本会移到边缘(如果这是您想要的):

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()
  }
}

结果:

原答案
好像可以调整 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)这似乎比它应该的更复杂，但它似乎有效。