macOS平台SwiftUI开发如何实现List组件整行可点击效果？

问题根因 #

1. 你当前将maxWidth: .infinity尺寸修饰符加在了Button视图的外层，这部分扩展的区域仅用来渲染背景样式，不属于Button本身的交互响应范围，所以只有HStack原本的文本内容区域可以响应点击。
2. 行内嵌套的Remove按钮没有单独指定按钮样式，会和外层Button的点击事件产生冲突，也会导致部分区域点击异常。

解决方案 #

按以下步骤调整代码即可实现整行点击效果：

• 把frame、padding这类控制尺寸的修饰符从Button外层，挪到Button的内容容器（HStack）上
• 给HStack添加.contentShape(Rectangle())修饰符，强制将整个HStack的矩形区域都识别为点击响应区
• 给内层的Remove按钮添加.buttonStyle(BorderlessButtonStyle())，避免和外层按钮的点击事件冲突

修改后的完整代码如下：

List {
    ForEach(sites, id: \.self) { site in
        Button(action: {
            self.selectedSite = site
        }) {
            HStack {
                Text(site)

                if let selectedSite = self.selectedSite, selectedSite == site {
                    Spacer()
                    Button(action: self.removeFromList) {
                        Text("Remove")
                    }
                    .background(Color.black)
                    .foregroundColor(.white)
                    .cornerRadius(6)
                    .buttonStyle(BorderlessButtonStyle()) // 解决内层按钮点击冲突
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading) // 尺寸修饰符移到内容层
            .padding(.horizontal, 10)
            .padding(.vertical, 8)
            .contentShape(Rectangle()) // 整行区域都识别为交互范围
        }
        .buttonStyle(PlainButtonStyle())
        .font(.system(size: 15))
        // 原代码未选中状态前景色也为白色会导致文本不可见，可根据需求调整为对应颜色
        .foregroundColor(selectedSite == site ? .white : .black)
        .background(selectedSite == site ? Color.blue : nil)
        .cornerRadius(6)
    }
}

效果预览：

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