I have created a CardView/Tile view to display as a two column. I have calculated the cardView width and height according to screen size of different devices.
The problem I am facing is adjustment of Image. I also have a text just below to Image.
Overall Image is fixed to its position but whenever text comes in two lines limitline(2)
the image little move to upward (top) position. I set aspect ratio but its not working properly.
Please help me out what I am doing wrong exactly. Can I set image according to screen size as I did for Card/Tile view? It picture you can see first tile image is moved up side.
Code:
import SwiftUI
struct TileView: View {
@StateObject var viewModel: CartViewModel
// MARK: - Constants
private struct ViewConstants {
static let screenWidth = Constants.DeviceConfig.screenWidth
static let cardRatio = 133.0/148.0
static let cardWidth = screenWidth / 2 - 24
static let cardHeight = cardWidth/cardRatio
static let imageWidth: CGFloat = 106
static let imageHeight: CGFloat = 106
}
var body: some View {
VStack(spacing: 8) {
Image(viewModel.image)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: ViewConstants.imageHeight)
Text(viewModel.title)
.lineLimit(2)
.multilineTextAlignment(.center)
.padding(.horizontal, 16)
}
.frame(width: ViewConstants.cardWidth, height: ViewConstants.cardHeight)
.background(Color.gray)
.cornerRadius(10)
}
}
Image: