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

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默认情况下不应用填充的a中。请注意，对于大型列表，它的效率非常低：

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

第二种方法有点hacky。您可以对您应用负填充以将其Image一直扩展到边缘：

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

另外值得一提的是，如果您将 User 类型声明为Identifiable：

extension User: Identifiable {}

您将能够以ForEach更简单的方式声明您的，如下所示：

ForEach(users)