SwiftUI中如何通过onTapGesture获取LazyVGrid单元格的ID或位置？

问题描述 #

我正在把个人Android应用迁移到SwiftUI来学习该框架，目前在做界面原型。已经实现了LazyVGrid，希望点击单元格时能获取它的ID，或是在网格中的行、列信息，方便操作对应的数据。另外因为是在iPhone上运行，表格没法展示所有列。

解决方案 #

要实现单个单元格的点击响应并获取其位置信息，你需要将点击手势绑定到每个单元格视图上，而不是整个LazyVGrid。以下是修改后的代码：

import SwiftUI

struct ContentView: View {
    init() {
        let appearance = UINavigationBarAppearance()
        
        appearance.largeTitleTextAttributes = [
            .font: UIFont.systemFont(ofSize: 30)]
        
        UINavigationBar.appearance().standardAppearance = appearance
    }

    private var columns = [GridItem(.fixed(120), spacing: 0),
                           GridItem(.fixed(52), spacing: 0),
                           GridItem(.fixed(52), spacing: 0),
                           GridItem(.fixed(52), spacing: 0),
                           GridItem(.fixed(52), spacing: 0),
                           GridItem(.fixed(52), spacing: 0)]

    @State var gridData: [String] = []

    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 0) {
                    ForEach((0..<gridData.count), id: \.self) { index in
                        let width: CGFloat = index % 6 == 0 ? 120 : 52
                        let alignment: Alignment = index % 6 == 0 ? .leading : .center
                        Text(gridData[index])
                            .padding(.horizontal, 4)
                            .frame(width: width, height: 30, alignment: alignment)
                            .border(Color.black)
                            // 给单个单元格添加点击手势
                            .onTapGesture {
                                // 获取单元格索引（可作为ID使用）
                                let cellID = index
                                // 计算列索引（从0开始）
                                let columnIndex = index % columns.count
                                // 计算行索引（从0开始）
                                let rowIndex = index / columns.count
                                // 获取对应的数据
                                let cellData = gridData[index]
                                
                                print("点击了单元格 ID：\(cellID)")
                                print("行：\(rowIndex)，列：\(columnIndex)")
                                print("对应数据：\(cellData)")
                            }
                    }
                }
            }
            .task {
                gridData = setupGridData()
            }
            .navigationTitle("开球时间管理")
            .fontWeight(.light)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Image(systemName: "gear")
                }
            }
    }
    
    // 补充示例数据生成函数（原代码未实现）
    func setupGridData() -> [String] {
        return (0..<30).map { "数据\($0)" }
    }
}

关键修改说明 #

• 将onTapGesture从LazyVGrid移至每个单元格视图上，确保点击单个单元格时触发独立响应。
• 通过循环的index参数直接获取单元格的全局索引，可直接作为ID使用。
• 利用整数运算计算行列信息：
  • index % columns.count：取余运算得到当前单元格的列索引（columns.count为你的总列数，这里是6）。
  • index / columns.count：整数除法得到当前单元格的行索引（从0开始计数）。
• 直接通过gridData[index]获取该单元格对应的数据，方便后续业务操作。

iPhone屏幕适配建议 #

你当前使用.fixed()固定宽度的列，在iPhone窄屏上可能会导致横向滚动。如果需要适配屏幕宽度，可以调整列的定义，比如使用.flexible()让列自适应剩余空间：

private var columns = [
    GridItem(.flexible(minimum: 120)),
    GridItem(.flexible(minimum: 52)),
    GridItem(.flexible(minimum: 52)),
    GridItem(.flexible(minimum: 52)),
    GridItem(.flexible(minimum: 52)),
    GridItem(.flexible(minimum: 52))
]

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