ios - SwiftUI List ForEach View 中的按钮即使不是 "tapped"也会触发？

Question

我有以下代码:

struct ButtonTapTest: View {
    
    let items = [1, 2, 3]
    
    var body: some View {
        
        List {
            ForEach(items, id:\.self) { item in
                CellTestView()
            }
        }
        
    }
}


struct CellTestView:View {
    
    
    var body: some View {
        
        VStack {
            
            Button {
                print("TOP")
            } label: {
                Image(systemName: "play.fill")
                    .font(.system(size: 40))
                    .foregroundColor(.red)
            }
            .border(.red)
            
            Spacer()
            
            Button {
                print("BOTTOM")
                
            } label: {
                Image(systemName: "play")
                    .font(.system(size: 40))
                    .foregroundColor(.red)
            }
            .border(.yellow)
            
        }
        
    }
    
}

创建以下屏幕:

问题:

无论我点击 CellTestView 的哪个位置，单元格中的两个按钮操作都会被触发。我希望单独的按钮操作单独触发，每个按钮仅在其按钮被点击时触发，而不是在我点击单元格上其他任何地方的外部时触发。

您可以在下面的 gif 中看到，无论我点击 CellTestView 的哪个位置，无论我点击 View 的哪个位置，两个按钮操作都会触发，“TOP”和“BOTTOM” "日志同时触发。

如何解决此问题，以便单元格中的两个按钮独立接收点击，并且仅当点击位于相关按钮内时？

Answer 1

每当列表行中有多个按钮时，您需要手动将按钮样式设置为.borderless 或.plain。这是因为按钮“适应”了它们的上下文。根据documentation :

If you create a button inside a container, like a List, the style resolves to the recommended style for buttons inside that container for that specific platform.

因此，当您的按钮位于列表中时，其点击目标会扩展以填充该行，并且您会获得高亮动画。当你有超过 2 个按钮时，SwiftUI 不够聪明，无法阻止这种副作用，所以你需要设置 buttonStyle手动。

CellTestView()
    .buttonStyle(.borderless)

结果: