如何为SwiftUI LazyVGrid的行添加点击触发的圆角矩形Overlay

要实现点击行内任意网格项时整行显示圆角Overlay，核心是先把数据按行分组，再为每个行组单独处理选中状态和Overlay。以下是修改后的完整代码：

import SwiftUI

struct ContentView: View {
    // 示例日期数据（替换成你的实际数据）
    let data: [Date] = {
        var dates = [Date]()
        let calendar = Calendar.current
        guard let startDate = calendar.date(from: DateComponents(year: 2024, month: 1, day: 1)) else { return [] }
        for day in 0..<30 {
            if let date = calendar.date(byAdding: .day, value: day, to: startDate) {
                dates.append(date)
            }
        }
        return dates
    }()
    
    let columns = Array(repeating: GridItem(.flexible()), count: 7)
    // 记录选中的行索引
    @State private var selectedRowIndex: Int?
    
    // 将原始数据按列数分组，得到每行的元素数组
    private var rowGroups: [[Date]] {
        stride(from: 0, to: data.count, by: columns.count).map {
            Array(data[$0..<min($0 + columns.count, data.count)])
        }
    }
    
    var body: some View {
        LazyVGrid(columns: columns, spacing: 20) {
            ForEach(Array(rowGroups.enumerated()), id: \.offset) { index, rowItems in
                // 用Group包裹整行元素，作为点击和Overlay的容器
                Group {
                    ForEach(rowItems, id: \.self) { item in
                        Text(item.formatted(date: .numeric, time: .omitted))
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                    }
                }
                .contentShape(Rectangle()) // 让整行区域都能响应点击
                .onTapGesture {
                    selectedRowIndex = selectedRowIndex == index ? nil : index
                }
                .overlay(
                    // 选中时显示圆角矩形Overlay
                    RoundedRectangle(cornerRadius: 12)
                        .stroke(Color.blue, lineWidth: 2)
                        .opacity(selectedRowIndex == index ? 1 : 0)
                )
            }
        }
        .padding(.horizontal)
    }
}

关键说明： #

• 数据分组：通过stride方法把原始数据按7列一组拆分，得到rowGroups，每个元素对应一行的所有数据项。
• 选中状态管理：用@State private var selectedRowIndex记录当前选中的行索引，点击时切换选中状态（再次点击取消选中）。
• 整行点击响应：给每个行组的Group添加.contentShape(Rectangle())，确保行内空白区域也能触发点击。
• Overlay显示：只有当当前行索引等于选中索引时，才显示蓝色圆角边框的Overlay，通过opacity控制显示/隐藏。

如果需要调整Overlay的样式（比如填充色、边框粗细），直接修改RoundedRectangle的属性即可。

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