SwiftUI ToolbarItem点击区域过小问题求助（附UIKit对比验证）

很多开发者都会碰到这个问题：SwiftUI里作为ToolbarItem添加的Button，点击区域比UIKit的UIBarButtonItem小很多，用户点击起来很不方便。通过UIKit测试验证，当视图没有设置背景色时，UIBarButtonItem也会出现同样的点击区域缩水问题，这和SwiftUI的情况完全一致。

下面是几个实用的解决办法：

• 给Button添加padding并设置contentShape
  这是最简单的快速修复方式，通过padding扩大可点击范围，再用contentShape让整个padding区域都能响应点击：

  .toolbar {
      ToolbarItem(placement: .navigationBarTrailing) {
          Button("Test") {
              // 这里写点击逻辑
          }
          .padding()
          .contentShape(Rectangle())
      }
  }
  

  默认情况下Button的点击区域只跟随文字/图标大小，添加contentShape(Rectangle())后，整个padding包裹的矩形区域都会变成可点击区域。

• 自定义View包裹Button，固定点击区域尺寸
  如果需要更精准控制点击区域大小，可以直接设置frame匹配iOS标准的可点击区域（44pt高度是苹果推荐的最小可点击尺寸）：

  .toolbar {
      ToolbarItem(placement: .navigationBarTrailing) {
          CustomBarButton(title: "Test") {
              // 点击逻辑
          }
      }
  }
  
  struct CustomBarButton: View {
      let title: String
      let action: () -> Void
  
      var body: some View {
          Button(action: action) {
              Text(title)
          }
          .frame(width: 60, height: 44)
          .contentShape(Rectangle())
      }
  }
  

  这种方式能确保点击区域和UIKit原生的UIBarButtonItem一致，用户体验统一。

• 用UIViewRepresentable包装UIKit的UIBarButtonItem
  如果想完全复用UIKit的原生行为，彻底避免点击区域问题，可以直接把UIKit的按钮包装成SwiftUI视图：

  .toolbar {
      ToolbarItem(placement: .navigationBarTrailing) {
          UIKitBarButton(title: "Test") {
              // 点击逻辑
          }
      }
  }
  
  struct UIKitBarButton: UIViewRepresentable {
      let title: String
      let action: () -> Void
  
      func makeUIView(context: Context) -> UIButton {
          let button = UIButton(type: .system)
          button.setTitle(title, for: .normal)
          button.addTarget(context.coordinator, action: #selector(Coordinator.handleTap), for: .touchUpInside)
          return button
      }
  
      func updateUIView(_ uiView: UIButton, context: Context) {
          uiView.setTitle(title, for: .normal)
      }
  
      func makeCoordinator() -> Coordinator {
          Coordinator(action: action)
      }
  
      class Coordinator: NSObject {
          let action: () -> Void
  
          init(action: @escaping () -> Void) {
              self.action = action
          }
  
          @objc func handleTap() {
              action()
          }
      }
  }
  

  UIKit的UIButton原生就会处理足够的点击区域，包装后直接继承这个特性，完全解决问题。

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