Question

我想使列表中的图像与屏幕边缘齐平，但是如果将.listRowInsets(EdgeInsets())添加到图像中，则不会发生任何事情。而且，如果我向VStack添加相同的代码，则列表的格式将被破坏。

List {
    ForEach(users, id: \.id) { User in
        VStack(alignment: .leading) {
            Image(User.image)
                .resizable()
                .scaledToFill()
            Text(User.name).font(.body)
        }
    }
} .listStyle(GroupedListStyle())

Answer 1

之所以看不到边到边绘制的图像，是因为List默认情况下已应用填充。有两种可能的解决方法：

第一个。如果用户列表不是很大，则可以将ForEach放在ScrollView内，默认情况下不应用填充。请注意，这对于大型列表而言效率很低：

ScrollView {
    ForEach(users, id: \.id) { user in
        VStack(alignment: .leading) {
            Image(user.image)
                .resizable()
                .scaledToFill()
            Text(user.image)
        }
    }
}

第二种方法有些古怪。您可以对Image施加负填充，以将其一直扩展到边缘：

List {
    ForEach(users, id: \.id { user in
        VStack(alignment: .leading) {
            Image(user.image)
                .resizable()
                .scaledToFill()
                .padding([.leading, .trailing], -16.0)
            Text(user.name)
        }
    }
}

还值得一提的是，如果您将用户类型声明为Identifiable：

extension User: Identifiable {}

您将能够以这种简单的方式声明ForEach：

ForEach(users)

SwiftUI：如何在列表中使图像与屏幕边缘齐平？

1 个答案: