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

Question

我想让列表中的图像与屏幕边缘齐平，但如果添加 .listRowInsets(EdgeInsets())图像没有任何 react 。
如果我将相同的代码添加到 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)
        }
    }
}

第二种方法有点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)