How To Make Swiftui Text Multilinetextalignment Start From Top And Center

How can I make the image and text alignment same as 3 other in SwiftUI LazyVGrid as I expected in image below? I think the problem is how to make the text start from top if the te

Solution 1:

For the Text's frame, you need to:

1. set maxHeight to .infinity, so it can expand vertically too
2. set alignment to .top, so it's aligned to the top

let names = ["Hi", "Hello world", "Long long text"]

let gridItemLayout = [
   GridItem(.adaptive(minimum: 80))
]

var body: someView {
    
    LazyVGrid(columns: gridItemLayout, spacing: 0) {
        ForEach((0...7), id: \.self) { i inVStack {
                Image(systemName: "folder")
                .frame(width: 100, height: 100)
                .background(Color.green)
                Text(names.randomElement() ??"")
                .font(.body)
                .multilineTextAlignment(.center)
                
                /// here!
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
            }
        }
    }
    .padding(.horizontal, 25.0)
}

Result: