格式化 LazyHGrid 的问题 - SwiftUI

Question

我正在尝试创建一个基本的 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)
                        
                    }
                }
            }
        }
    }

Answer 1

这可能与您的 Square 中的硬编码框架有关。如果你只想要一个正方形或 frame ZStack 或 frame ZStack 的每一层，请尝试使用 aspectRatio，具体取决于你想要实现的目标。

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

Answer 2

据我了解，您尝试将图像和文本放入矩形中，因此请尝试使用覆盖而不是 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)
            })
        }
    }

格式化 LazyHGrid 的问题 - SwiftUI

Problem with formatting LazyHGrid - SwiftUI

xcode

swiftui

lazyhgrid