问题

我有一个SwiftUI代码片段，显示一个具有多行和多列的网格。每一行包含多个元素，第一列的元素对齐到前沿，而其余列的元素对齐到后沿。我想引入一个NavigationLink，使每两行可点击为单个按钮，同时不更改网格布局。例如，当用户点击第一两行中的任何元素（Row1A - Row1111A和Row1B - Row1111B），它应导航到特定视图。

这是我的代码片段：

```swift
struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            Grid(alignment: .trailing, horizontalSpacing: 20) {
                GridRow {
                    ForEach(1..<5) { column in
                        Text("Column \(column)")
                    }
                }
                Divider()
                ForEach(1..<7) { row in
                    GridRow {
                        Text("Row \(row) A")
                            .gridColumnAlignment(.leading)
                        Text("Row \(row)\(row) A")
                        Text("Row \(row)\(row)\(row) A")
                        Text("Row \(row)\(row)\(row)\(row) A")
                    }
                    GridRow {
                        Text("Row \(row) B")
                        Text("Row \(row)\(row) B")
                        Text("Row \(row)\(row)\(row) B")
                        Text("Row \(row)\(row)\(row)\(row) B")
                    }
                    Divider()
                }
            }
        }
        .padding()
    }
}

ForEach(1..<7) { row in
    NavigationLink {
        Text("View \(row)")
    } label: {
        Grid {
            GridRow {
                Text("Row \(row) A")
                    .gridColumnAlignment(.leading)
                Text("Row \(row)\(row) A")
                Text("Row \(row)\(row)\(row) A")
                Text("Row \(row)\(row)\(row)\(row) A")
            }
            GridRow {
                Text("Row \(row) B")
                Text("Row \(row)\(row) B")
                Text("Row \(row)\(row)\(row) B")
                Text("Row \(row)\(row)\(row)\(row) B")
            }
            Divider()
        }
    }
}

我使用了一个"Grid"容器来将两个GridRows组合成一个标签，但由于我为每两行引入了一个新的Grid，我无法将第一列中的元素对齐到前沿，同时将其余列中的元素对齐到后沿。我还尝试了"Group"和"VStack"，但它没有提供所需的布局以实现预期的元素对齐。任何帮助或建议将不胜感激。

<details>
<summary>英文:</summary>

I have a SwiftUI code snippet that displays a Grid with multiple rows and columns. Each row consists of several elements, with the elements in the first column aligning to the leading edge, while the elements in the remaining columns aligns to the trailing edge. I would like to introduce a NavigationLink to make every two rows tappable as a single button w/o changing the grid layout. For example, when a user taps on any element in the first two rows(Row1A - Row1111A AND Row1B - Row1111B ), it should navigate to a specific view.

Here&#39;s my code snippet:

struct ContentView: View {
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
Grid(alignment: .trailing, horizontalSpacing: 20) {
GridRow {
ForEach(1..<5) { column in
Text("Column (column)")
}
}
Divider()
ForEach(1..<7) { row in
GridRow {
Text("Row (row) A")
.gridColumnAlignment(.leading)
Text("Row (row)(row) A")
Text("Row (row)(row)(row) A")
Text("Row (row)(row)(row)(row) A")
}
GridRow {
Text("Row (row) B")
Text("Row (row)(row) B")
Text("Row (row)(row)(row) B")
Text("Row (row)(row)(row)(row) B")
}
Divider()
}
}
}
.padding()
}
}

ForEach(1..<7) { row in
NavigationLink {
Text("View (row)")
} label: {
Grid {
GridRow {
Text("Row (row) A")
.gridColumnAlignment(.leading)
Text("Row (row)(row) A")
Text("Row (row)(row)(row) A")
Text("Row (row)(row)(row)(row) A")
}
GridRow {
Text("Row (row) B")
Text("Row (row)(row) B")
Text("Row (row)(row)(row) B")
Text("Row (row)(row)(row)(row) B")
}
Divider()
}
}
}

I used a "Grid" container to combine two GridRows into a single label, but since I introduced a new Grid for every two rows,  I am unable to align the elements in the first column to the leading edge while aligning the elements in the remaining columns to the trailing edge. I also tried "Group" and "VStack", but it did not provide the desired layout for aligning the elements as intended. Any help or suggestions would be greatly appreciated.

</details>


# 答案1
**得分**: -1

我最终使用了LazyVStack。

<details>
<summary>英文:</summary>

I ended up using LazyVStack instead.

</details>