Блог

Я пытаюсь создать базовую lazyHGrid, но, просмотрев несколько разных онлайн-руководств, мне все еще не удается создать ее должным образом. Я пытаюсь создать сетку, заполненную прямоугольниками с символами и текстом внутри этих прямоугольников. Смотрите изображение ниже:

Если я сделаю это в HStack, все прямоугольники будут представлены правильно, но как только я помещу это в LazyHGrid, я получу эту проблему. Есть идеи?

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

Насколько я понял, вы пытаетесь поместить изображение и текст в прямоугольник, поэтому попробуйте использовать overlay вместо 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)
            })
        }
    }
  

Возможно, это связано с жестко заданным фреймом в вашем квадрате. Попробуйте использовать aspectRatio , если вам просто нужен квадрат или frame каждый слой ZStack или frame в ZStack зависимости от того, чего вы хотите достичь.

 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()
    }
}