I'm trying to create the following grid format in SwiftUI:
For context, this is a row in a basket. I'm trying to use a LazyVGrid
and so far have the following column layout defined:
let columns = [
GridItem(.flexible()),
GridItem(.flexible(minimum: 150), alignment: .topLeading),
GridItem(.flexible(), alignment: .topTrailing),
GridItem(.flexible(), alignment: .topTrailing)
]
private func refundedLine(_ line: PlacedOrderLine) -> some View {
LazyVGrid(columns: columns) {
itemImage(item: line.item)
VStack(alignment: .leading, spacing: 4) {
Text(viewModel.itemName(line.item))
.font(.Body2.regular())
Text(line.item.price.pricePerItemString)
.font(.Body2.semiBold())
}
Text("\(line.quantity)")
.font(.Body2.semiBold())
.foregroundColor(colorPalette.primaryRed)
Text(viewModel.pricePaid(line: line))
.font(.Body2.semiBold())
.foregroundColor(colorPalette.primaryRed)
.strikethrough()
}
}
This gets me everything I need, except for the 'Replaces' line. This line needs to sit just below the unit price, aligned with the item description, but should run the remaining width of the overall grid.
This line format is obviously repeated for each basket item. I obviously want to avoid using H/VStacks because aligning, for example, the quantity column (column 3) will be very difficult and it doesn't seem very extendible.
I'm aware of some advancements with grid layouts in iOS16 but we need to support at least iOS15