Как сделать изображение вровень с краями экрана в 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, к которому по умолчанию не применен отступ. Обратите внимание, что это очень неэффективно для больших списков:

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)