Grid内Button点击区域异常：点击任意位置均触发同一按钮

核心问题 #

你遇到的是SwiftUI Grid布局的特性导致的点击区域异常：

• GridRow中的元素默认会填充所在列的可用空间，Button的可点击区域是它在Grid中占据的整个单元格范围，而非你看到的边框显示的内容范围。
• 你添加的Spacer在Grid布局中无法像在HStack中一样正确分隔元素，反而导致Button的单元格空间被拉伸，最终出现点击Grid内任意区域都触发同一个Button的情况。
• 换成Section后正常，是因为Section内部默认采用HStack/VStack布局，Spacer能正确限制Button的点击区域。

解决方案 #

有两种直接的修复方式：

1. 限制Button的点击区域为内容大小

给每个Button添加.fixedSize()修饰符，强制Button仅占用其内容所需的空间，避免点击区域被拉伸：

Grid {
  GridRow {
    Button(action: pick) {
      Label("Pick", systemImage: "doc.fill.badge.plus")
    }
    .border(Color.black)
    .fixedSize() // 限制点击区域为内容大小
    
    Spacer()
    
    Button(action: upload) {
      Label("Upload", systemImage: "arrow.up.circle.fill")
    }
    .border(Color.black)
    .fixedSize()
    .disabled(model.outgoingFiles.isEmpty || model.outgoingFiles.allSatisfy({$0.isUploaded || $0.isUploading}))
    
    Spacer()
    
    Button(action: send) {
      Label("Send", systemImage: "arrow.up.backward.circle.fill")
    }
    .border(Color.black)
    .fixedSize()
    .disabled(model.outgoingFiles.isEmpty || !model.outgoingFiles.allSatisfy({$0.isUploaded}))
  }
}

2. 明确Grid列的对齐方式

通过.gridColumnAlignment()指定每个Button在列中的对齐方式，限制其占据的空间：

Grid(alignment: .center) {
  GridRow {
    Button(action: pick) {
      Label("Pick", systemImage: "doc.fill.badge.plus")
    }
    .border(Color.black)
    .gridColumnAlignment(.leading) // 左对齐，仅占用内容空间
    
    Spacer()
    
    Button(action: upload) {
      Label("Upload", systemImage: "arrow.up.circle.fill")
    }
    .border(Color.black)
    .gridColumnAlignment(.center) // 居中对齐
    .disabled(model.outgoingFiles.isEmpty || model.outgoingFiles.allSatisfy({$0.isUploaded || $0.isUploading}))
    
    Spacer()
    
    Button(action: send) {
      Label("Send", systemImage: "arrow.up.backward.circle.fill")
    }
    .border(Color.black)
    .gridColumnAlignment(.trailing) // 右对齐
    .disabled(model.outgoingFiles.isEmpty || !model.outgoingFiles.allSatisfy({$0.isUploaded}))
  }
}

两种方式都能解决点击区域异常的问题，根据你的布局需求选择即可。

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