Xcode - Problem with formatting LazyHGrid - SwiftUI

spoax
November 19, 2020
103 views
0 votes
2 Answers

I am trying to create a basic lazyHGrid but after looking at a couple of different tutorials online I still can’t manage to build it properly. I am trying to make a grid that is filled with rectangles with symbols and text inside those rectangles. See image below:

If I make this in a HStack all the rectangles are presented correctly, but as soon as I put it into a LazyHGrid I get this problem. Any ideas?

let rows = [
            GridItem(.fixed(200)),
            GridItem(.fixed(200)),
        ]
    
    var product: ProductModel

    var body: some View {
        LazyHGrid(rows: rows, alignment: .center) {
            ForEach(0..<product.imageStack01Image.count, id: .self) { item in
                ZStack(alignment: .top){
                    RoundedRectangle(cornerRadius: 25, style: .continuous)
                        .fill(Color.white)
                        .frame(width: 200, height: 200)
                        .shadow(color: Color.black.opacity(0.08), radius: 20, x: 0, y: 5)
                    VStack(alignment: .leading) {
                        Image(systemName:product.imageStack01Image[item])
                            .font(.system(size: 40.0))
                            .frame(height: 40)
                            .foregroundColor(.red)
                            .padding(.top, 40)
                            .padding(.leading, 10)
                        Text(product.imageStack01Text[item])
                            .font(.title2)
                            .fontWeight(.medium)
                            .multilineTextAlignment(.trailing)
                            .padding(10)
                        
                    }
                }
            }
        }
    }

Answers

It might have to do with the hardcoded frame in your square. Try using aspectRatio if you just want a square or frame each layer of the ZStack or frame the ZStack depending on what you want to achieve.

import SwiftUI

struct LazyGridSample: View {
    ///Sample Products to reproduce
    @State var products = ["0xxxxxxxxxx0xxxxxxxxxx","1xxxxxxxxxx0xxxxxxxxxx","2xxxxxxxxxx0xxxxxxxxxx","3xxxxxxxxxx0xxxxxxxxxx","4xxxxxxxxxx0xxxxxxxxxx","5xxxxxxxxxx0xxxxxxxxxx","6xxxxxxxxxx0xxxxxxxxxx","7xxxxxxxxxx0xxxxxxxxxx","8xxxxxxxxxx0xxxxxxxxxx","9xxxxxxxxxx0xxxxxxxxxx"]
    let rows = [
        GridItem(.fixed(200)),
        GridItem(.fixed(200)),
    ]
    
    let squareSize: CGSize = CGSize(width: 200, height: 200)
    
    var body: some View {
        //ScrollView(.horizontal){
        LazyHGrid(rows: rows, alignment: .center) {
            //HStack{
            ForEach(0..<products.count, id: .self) { idx in
                ZStack(alignment: .top){
                    RoundedRectangle(cornerRadius: 25, style: .continuous)
                        .fill(Color.white)
                        //.frame(width: squareSize.width, height: squareSize.height)
                        //.aspectRatio(1, contentMode: .fill)
                        .shadow(color: Color.black.opacity(0.08), radius: 20, x: 0, y: 5)
                    VStack(alignment: .leading) {
                        //Removed Image
                        Text(products[idx].description)
                            
                            .font(.title2)
                            .fontWeight(.medium)
                            
                            .multilineTextAlignment(.trailing)
                            
                            .padding(10)
                        
                    }//.frame(width: squareSize.width, height: squareSize.height, alignment: .center)
                    //.aspectRatio(1, contentMode: .fill)
                }//Adjusts the the entire ZStack
                //.frame(width: squareSize.width, height: squareSize.height, alignment: .center)
                .aspectRatio(1, contentMode: .fill)
            }
        }
        //}//ScrollView
    }
}

struct LazyGridSample_Previews: PreviewProvider {
    static var previews: some View {
        LazyGridSample()
    }
}

As far as I understood your try to put image and text into rectangle, so try to use overlay instead of ZStack

    ForEach(0..<product.imageStack01Image.count, id: .self) { item in
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .fill(Color.white)
            .frame(width: 200, height: 200)
            .shadow(color: Color.black.opacity(0.08), radius: 20, x: 0, y: 5)
            .overlay(
                VStack(alignment: .leading) {
                    Image(systemName:product.imageStack01Image[item])
                        .font(.system(size: 40.0))
                        .frame(height: 40)
                        .foregroundColor(.red)
                        .padding(.top, 40)
                        .padding(.leading, 10)
                    Text(product.imageStack01Text[item])
                        .font(.title2)
                        .fontWeight(.medium)
                        .multilineTextAlignment(.trailing)
                        .padding(10)
            })
        }
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Xcode – Problem with formatting LazyHGrid – SwiftUI

Answers