Как сделать, чтобы текст SwiftUI Text multilineTextAlignment начинался сверху и по центру

Question

Как я могу сделать выравнивание изображения и текста таким же, как 3 другие в SwiftUI LazyVGrid, как я ожидал на изображении ниже?

Я думаю, проблема в том, как заставить текст начинаться сверху, если текст многострочный. В Android я могу использовать gravity = "top | center", но в SwiftUI я использую .multilineTextAlignment (.center), но результат не такой, как я ожидал.

Вот что я просто пробую в своем коде:

            LazyVGrid(columns: gridItemLayout, spacing: 0) {
          ForEach((0...7), id: \.self) { i in
               VStack {
                    RemoteImageView(url: vm.listService[i].image_uri)
                        .frame(width: 100, height: 100)
                    Text(vm.listService[i].name)
                        .font(.body)
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity, alignment: .center)
               }
         }
      }
      .padding(.horizontal, 25.0)

Answer 1

Для Textкадра, вам необходимо:

1. набор maxHeight к .infinity, поэтому он может расширяться и вертикально
2. набор alignment к .top, поэтому он выровнен по верхнему краю

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

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

var body: some View {
    
    LazyVGrid(columns: gridItemLayout, spacing: 0) {
        ForEach((0...7), id: \.self) { i in
            VStack {
                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)
}

Результат: