SwiftUI List自定义单元格仅文本可点击的修复方法咨询

问题根源是自定义单元格DraftPostCell未占据整个列表行宽度，仅文本区域被识别为可点击范围，通过以下调整即可修复：

1. 让单元格内容填充整个列表行 #

在DraftPostCell的VStack上添加frame(maxWidth: .infinity)，强制内容扩展至整行宽度，同时用contentShape(Rectangle())明确可点击区域为整个矩形：

struct DraftPostCell: View {
    var draft: CDDraftPost
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(draft.title ?? "")
                .frame(alignment: .leading)
                .font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
                .padding(.bottom, 10)
            if let body = draft.body {
                Text(body)
                    .frame(alignment: .leading)
                    .multilineTextAlignment(.leading)
                    .frame(maxHeight: 40)
                    .font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
            }
            Text(draft.date?.toString(format: "EEEE, MMM d, yyyy") ?? "")
                .frame(alignment: .leading)
                .font(Font(UIFont.uStadium.helvetica(ofSize: 12)))
        }
        .padding(.horizontal, 16)
        // 强制VStack占满整行宽度，对齐方式保持左对齐
        .frame(maxWidth: .infinity, alignment: .leading)
        // 指定可点击区域为整个矩形
        .contentShape(Rectangle())
    }
}

2. 简化外部点击手势绑定 #

此时SelectDraftView中无需额外给DraftPostCell添加contentShape，直接保留onTapGesture即可：

ForEach(viewModel.drafts.indices, id: \.self) { index in
    DraftPostCell(draft: viewModel.drafts[index])
        .onTapGesture {
            presentationMode.wrappedValue.dismiss()
        }
}

原理说明 #

SwiftUI的点击手势默认仅响应视图的可见内容区域，通过frame(maxWidth: .infinity)让单元格内容覆盖整个列表行，再用contentShape(Rectangle())将整个矩形区域标记为可点击，就能实现点击空白区域也触发事件的效果。

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