如何让双列LazyVGrid的单行元素居中？

你的问题在于用HStack+Spacer的方式无法跨列调整元素位置，LazyVGrid的布局由列定义控制，正确的做法是让单行的元素跨占所有列，利用SwiftUI的gridCellColumns修饰符实现：

修改后的代码 #

// 先确保columns是两个自适应列（示例）
let columns = [
    GridItem(.flexible()),
    GridItem(.flexible())
]

LazyVGrid(columns: columns, alignment: .center, spacing: 35) {
    ForEach(pets) { pet in
        VStack {
            Image(pet.species.rawValue)
                .resizable()
                .frame(width: 80, height: 80)

            Text(pet.name)
                .poppinsBold(size: 16)
        }
    }

    Button {
        addPetSheet = true
    } label: {
        VStack {
            ZStack {
                Circle()
                    .frame(width: 70, height: 70)
                    .foregroundStyle(.gray)

                Image(systemName: "plus")
                    .foregroundStyle(.white)
                    .font(.title)
            }

            Text("Add")
                .poppinsBold(size: 16)
        }
    }
    // 核心逻辑：当宠物数量为奇数时，Add按钮跨占2列
    .gridCellColumns(pets.count % 2 == 1 ? 2 : 1)
}

原理说明 #

• gridCellColumns(n)可以让元素占据n个列的宽度
• 当宠物数量是奇数时，前面的元素会填满整行，最后只剩Add按钮，此时让它跨2列，就会占据整个行的宽度，按钮内部的内容默认居中，自然实现整体居中
• 如果宠物数量是偶数，Add按钮只占1列，和最后一个宠物在同一行，保持原有布局

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