SwiftUI 中如何将 List 整行设置为可点击的 NavigationLink

问题原因 #

SwiftUI 默认仅将视图中存在实际渲染内容的区域判定为可交互区域，你使用Spacer撑满横向宽度后，空白区域默认不会接收点击事件，导致NavigationLink仅能在有文本/表情的部分触发点击。

修复步骤 #

1. 修改SetRow的外层视图修饰符，新增两个配置即可实现整行响应：

• 添加frame(maxWidth: .infinity, alignment: .leading)确保行视图撑满List的整行宽度
• 添加contentShape(Rectangle())强制将整个矩形frame区域判定为可交互区域

修改后的SetRow完整代码如下：

HStack {
    Text(viewModel.questionSet.emoji)
        .font(.system(size: 50))
    VStack(alignment: .leading) {
        Text(viewModel.questionSet.title)
            .font(.system(size: 20, weight: .semibold, design: .default))
        VStack(alignment: .leading) {
            Text("Questions: \(viewModel.questionSet.size)")
                .font(.system(size: 15, weight: .light, design: .default))
                .foregroundColor(.gray)
            Text("Updated: \(viewModel.questionSet.lastUpdated, formatter: taskDateFormat)")
                .font(.system(size: 15, weight: .light, design: .default))
                .foregroundColor(.gray)
        }
    }
    Spacer()
}
.padding(.top, 10)
// 新增以下两个修饰符
.frame(maxWidth: .infinity, alignment: .leading)
.contentShape(Rectangle())

2. （可选）如果修改后仍存在点击无响应的区域，可以给List中的NavigationLink添加.buttonStyle(PlainButtonStyle())修饰符，避免按钮默认样式对交互区域的干扰：

NavigationLink(destination:
    SetView(viewModel: QuestionListViewModel(
                        emoji: setVM.questionSet.emoji,
                        title: setVM.questionSet.title,
                        setID: setVM.questionSet.id)
        ))
{
    SetRow(viewModel: setVM)
}
.buttonStyle(PlainButtonStyle()) // 新增该行
.onLongPressGesture(minimumDuration: 1) {
    selectedSetVM = setVM
    showDeleteAlert.toggle()
}

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