Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Problem with formatting LazyHGrid – SwiftUI

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:

enter image description here

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)
                        
                    }
                }
            }
        }
    }
Tags:

2

Answers


  1. 0

    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()
    }
}
    Login or Signup to reply.
  2. 0

    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)
            })
        }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search