SwiftUI LazyVGrid多行文本如何实现顶部对齐与水平居中布局

之前调整代码没有达到预期效果，主要来自两个认知和布局上的偏差：

• 对文本对齐属性的作用范围理解错误：multilineTextAlignment(.center) 仅控制多行文本块内部的行级水平对齐，完全不影响文本块本身在父容器中的垂直位置，单独使用这个属性自然无法实现顶对齐效果
• 没有适配LazyVGrid的默认布局逻辑：LazyVGrid 默认会将同一行内所有单元格的高度，对齐到该行最高单元格的高度，且单元格内的内容默认垂直居中排布。当某一个单元格的文本是多行内容、把整行单元格高度拉高后，其他短文本的内容就会因为默认居中对齐，出现在单元格垂直方向的中间位置，和预期的“文本从图片下方顶部开始排布”效果不符。

按照三个步骤调整现有代码逻辑：

• 给每个网格项的根 VStack 设置撑满整个单元格的高度、内容从顶部排布，避免整个内容组在单元格内垂直居中
• 给文本的占位 Frame 设置二维对齐规则：水平方向居中，垂直方向靠顶部，让文本块自身从占位区域的顶部开始排布
• 保留原有的 multilineTextAlignment(.center)，这个属性用来保证文本换行成多行时，每一行内容都在文本块内水平居中，和Android平台的对齐表现匹配

LazyVGrid(columns: gridItemLayout, spacing: 0) {
    ForEach((0...7), id: \.self) { i in
        VStack(spacing: 8) { // 可根据设计稿调整图片与文本的间距
            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: .init(horizontal: .center, vertical: .top)
                )
        }
        // 关键：让整个VStack撑满单元格高度，内容从顶部开始排布
        .frame(maxHeight: .infinity, alignment: .top)
    }
}
.padding(.horizontal, 25.0)

所有网格项的图片会保持水平、垂直方向的统一对齐，图片下方的文本都会从同一个顶部起始位置开始排布：

• 单行文本不会因为同行存在多行文本、导致单元格被拉高，就垂直居中漂到单元格中间位置
• 多行文本会从顶部位置开始逐行向下排版，文本块整体在容器内水平居中，完全复现Android平台 gravity="top|center" 的排版表现

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