struct HomeView: View {
@ObservedObject var viewModel = CarViewModel()
let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)
var body: some View {
GeometryReader { geometry in
VStack{
Text("Test")
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(viewModel.cars) { car in
CarCard(car: car) {
viewModel.addToCart(car: car)
}
}
}
.padding(20)
}
}
}
}
struct CarCard: View {
let car: Car
let action: () -> Void
@StateObject private var imageLoader = ImageLoader()
var body: some View {
VStack(alignment: .leading) {
if let uiImage = imageLoader.image {
Image(uiImage: uiImage)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(maxWidth: .infinity, maxHeight: 200)
} else {
ProgressView()
}
Text("\(car.price ?? "")₺")
.font(.headline)
.padding(.vertical, 4).foregroundStyle(.accent)
Text(car.name ?? "")
.font(.subheadline)
Text(car.model ?? "")
.font(.subheadline)
Spacer()
Button(action: action) {
Text("Add to Cart")
.frame(maxWidth: .infinity)
.foregroundColor(.white)
.padding()
.background(Color.accentColor)
.cornerRadius(5)
}
}.onAppear{
if let image = car.image {
imageLoader.loadImage(from: image)
}
}
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)
}
Я пробовал много вариантов, но размер первого элемента всегда сбивается. Как я могу исправить первый элемент, который выглядит следующим образом? Я также добавил код компонента карты, который разработал как собственный, но почему-то при использовании отступов искажается только размер и отступ первого элемента.





Не удалось воспроизвести вашу проблему. Пожалуйста, предложите вам в следующий раз использовать Минимальный воспроизводимый пример вместо ссылки на данные (изображения), которых нет у других.
В любом случае ваш общий код кажется правильным, поскольку приведенный ниже код обеспечивает согласованное заполнение. Пожалуйста, попробуйте. Полагаю, размеры ваших фотографий имеют к этому какое-то отношение?
struct ContentView: View {
let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)
var body: some View {
GeometryReader { geometry in
VStack{
Text("Test")
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(1...5, id:\.self) { number in
Text("\(number)")
}
}
.padding(20)
}
}
}
}
Image(uiImage: uiImage)
.resizable()
.frame(width: (geometry.size.width - 32), height: (geometry.size.height * 0.50 - 32))
Я нашел проблему, отрегулировав размер компонентов внутри карты с помощью геометрии и сделав их отзывчивыми. По мере увеличения размера элементов карты они могут быть повреждены в сетке.
На самом деле изображения взяты отсюда: loremflickr.com/640/480/food Возможно, в моем компоненте CustomCard есть ошибка, которую я не вижу. Я добавил это сейчас.