Image adjustment not fixed to position when Text comes in two lines in TileView SwiftUI


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:
TileView

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img