SwiftUI中如何实现LazyVGrid网格内的图标统一对齐？

出现该问题的核心原因是：LazyVGrid的单元格默认高度自适应内容，且单元格内的VStack默认居中排布内容，当某个单元格因文本过长整体高度变大时，内部的图标会随居中布局向上偏移，和其他单元格的图标不对齐。

可通过以下修改实现图标固定对齐，仅文本向下延伸：

• 给每个按钮内部的VStack添加maxHeight: .infinity修饰符，让所有单元格高度自动拉平到最高单元格的高度，同时指定VStack内容对齐方式为顶部对齐，确保所有内容从顶部开始排布
• 给Text添加多行显示配置，避免长文本被截断，同时可配置多行文本对齐方式

修改后的完整代码如下：

import SwiftUI

struct ContentView: View {
  let columns = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
  
  var body: some View {
    ScrollView {
      LazyVGrid(columns: columns, spacing: 20) {
        Button(action: {}) {
          VStack(spacing: 8) {
            Image(systemName: "tray")
              .font(.system(size: 40.0))
            Text("Item 1")
              .lineLimit(nil)
              .multilineTextAlignment(.center)
          }
          .frame(maxHeight: .infinity, alignment: .top)
          .padding(.vertical, 8)
        }
        
        Button(action: {}) {
          VStack(spacing: 8) {
            Image(systemName: "tray")
              .font(.system(size: 40.0))
            Text("Item 2")
              .lineLimit(nil)
              .multilineTextAlignment(.center)
          }
          .frame(maxHeight: .infinity, alignment: .top)
          .padding(.vertical, 8)
        }
        
        Button(action: {}) {
          VStack(spacing: 8) {
            Image(systemName: "tray")
              .font(.system(size: 40.0))
            Text("Item 935835050350")
              .lineLimit(nil)
              .multilineTextAlignment(.center)
          }
          .frame(maxHeight: .infinity, alignment: .top)
          .padding(.vertical, 8)
        }
      }
      .padding(.horizontal)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

修改后所有单元格高度会统一匹配最高项的高度，所有图标都固定在单元格的顶部区域，保持水平对齐，长文本会在图标下方自动换行向下延伸，不会影响图标位置。

内容的提问来源于stack exchange，提问作者Axel