如何在SwiftUI Grid中让每两行通过NavigationLink点击且不改变布局

要实现每两行作为一个可点击单元且不破坏原有列对齐，核心是保持外层Grid的列定义，将目标行组作为整体嵌入NavigationLink，同时确保行组占据Grid的全部列宽。以下是具体实现方案：

步骤1：定义Grid列对齐规则 #

先在外层Grid中明确列的对齐方式（第一列左对齐，其余右对齐）：

let columns = [
    GridItem(.flexible(), alignment: .leading),
    GridItem(.flexible(), alignment: .trailing),
    GridItem(.flexible(), alignment: .trailing)
]

步骤2：封装可点击的行组 #

将每两行（两个GridRow）放入VStack，再用NavigationLink包裹这个VStack，并通过gridCellColumns让VStack占据Grid的全部列，这样内部GridRow会自动继承外层的列对齐规则：

NavigationStack {
    Grid(columns: columns) {
        // 第一组可点击行
        NavigationLink(destination: DetailView(title: "第一组详情")) {
            VStack(spacing: 0) {
                GridRow {
                    Text("Row1A")
                    Text("Row11A")
                    Text("Row111A")
                }
                GridRow {
                    Text("Row1B")
                    Text("Row11B")
                    Text("Row111B")
                }
            }
            .gridCellColumns(columns.count) // 关键：让容器占据所有列，继承外层对齐
        }
        .buttonStyle(PlainButtonStyle()) // 移除默认按钮样式，避免布局偏移

        // 第二组可点击行
        NavigationLink(destination: DetailView(title: "第二组详情")) {
            VStack(spacing: 0) {
                GridRow {
                    Text("Row2A")
                    Text("Row22A")
                    Text("Row222A")
                }
                GridRow {
                    Text("Row2B")
                    Text("Row22B")
                    Text("Row222B")
                }
            }
            .gridCellColumns(columns.count)
        }
        .buttonStyle(PlainButtonStyle())
    }
    .padding()
}

// 示例详情页
struct DetailView: View {
    let title: String
    var body: some View {
        Text(title)
            .navigationTitle(title)
    }
}

原理说明 #

• 外层Grid的列定义是全局对齐的基础，所有内部GridRow都会遵循这个规则。
• gridCellColumns(columns.count)确保行组容器占据Grid的全部列宽，不会出现列错位。
• PlainButtonStyle()去掉了NavigationLink默认的按钮边框、内边距，完全保留原有Grid布局。

可选：添加点击反馈 #

如果需要点击时的视觉反馈，可以自定义按钮样式，替代PlainButtonStyle()：

struct GridTapStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? Color.gray.opacity(0.2) : Color.clear)
            .cornerRadius(4)
    }
}

使用时替换为：.buttonStyle(GridTapStyle())

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