如何为兼容低版本iOS的SwiftUI网格视图添加交互动作

自定义网格视图无法响应交互的核心原因有两点：

• 所用的第三方GridStack早期实现未给网格单元配置完整的命中测试区域，SwiftUI默认仅对实际渲染内容的位置响应手势，透明区域、布局边界外的区域默认不触发交互
• 代码中Alert的调用逻辑错误：Alert不能直接写在onTapGesture闭包内，必须通过.alert修饰符绑定布尔状态变量才能正常弹出。

1. 给所有网格单元添加.contentShape(Rectangle())修饰符，强制整个单元格矩形区域参与点击命中测试，这是解决自定义布局点击无响应的核心操作。
2. 调整手势挂载位置，将点击手势直接绑定在卡片视图的最外层容器上，避免多层修饰链导致的手势阻断。
3. 修正Alert触发逻辑，绑定已有的showAlert状态变量实现弹窗。
4. 修正代码中的小问题：colors.randomElement()返回可选值，直接传入background会导致渲染异常，需要补全默认值或者强制解包。

struct ContentView : View {
  let colors: [Color] = [.red, .green, .blue, .yellow, .purple]
  
  @State private var orientation = UIDeviceOrientation.unknown
  @State private var showAlert = false
  @State private var selectedShortcut: Int = 0 {
    didSet {
      showingHUD = false
    }
  }
  @State private var showingHUD = true
  
  var rows: CGFloat { return orientation.isPortrait || orientation == .unknown ? 5 : 3}
  var columns: CGFloat { return orientation.isPortrait || orientation == .unknown ? 3 : 5 }
  
  var body: some View {
    GeometryReader { proxy in
      GridStack(minCellWidth: (proxy.size.width / (columns + 1)), spacing: 6, numItems: 15) { index, cellWidth in
        CardView(
          iconName: "star.fill",
          title: "\(index + 1)",
          description: "(# \(index + 1))",
          width: cellWidth,
          height: (proxy.size.height / (rows)) - 7
        ) {
          selectedShortcut = index
          showingHUD.toggle()
          showAlert = true
        }
          .background(colors.randomElement() ?? .gray)
          .cornerRadius(10)
          .contentShape(Rectangle())
      }
      if showingHUD {
        HUD {
          Label("Shortcut: \(selectedShortcut)", systemImage: "star.fill")
        }
        .transition(AnyTransition.move(edge: .top).combined(with: .opacity))
        .onAppear {
          DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            withAnimation {
              showingHUD = false
            }
          }
        }
        .zIndex(1)
      }
    }
    .background(Color(red: 40/255, green: 40/255, blue: 40/255))
    .statusBar(hidden: true)
    .alert(isPresented: $showAlert) {
      Alert(
        title: Text("选中提示"),
        message: Text("你点击了第 \(selectedShortcut + 1) 个快捷项")
      )
    }
  }
}

struct HUD<Content: View>: View {
  @ViewBuilder let content: Content
  
  var body: some View {
    content
      .padding(.horizontal, 12)
      .padding(16)
      .background(
        Capsule()
          .foregroundColor(Color.white)
          .shadow(color: Color(.black).opacity(0.16), radius: 12, x: 0, y: 5)
      )
  }
}

struct CardView: View {
  var iconName: String
  var title: String
  var description: String
  var width: CGFloat
  var height: CGFloat
  var onTap: () -> Void
  
  var body: some View {
    VStack(alignment: .center, spacing: 4) {
      Image(systemName: iconName)
        .font(.system(size: 24))
        .padding(.top)
      VStack(alignment: .leading, spacing: 2) {
        Text(description)
          .lineLimit(2)
          .multilineTextAlignment(.leading)
      }
      .padding()
    }
    .foregroundColor(.white)
    .shadow(color: .darkGray, radius: 2, x: 2, y: 2)
    .frame(minWidth: width, maxWidth: width, minHeight: height, maxHeight: height)
    .contentShape(Rectangle())
    .onTapGesture {
      onTap()
    }
  }
}

如果修改后仍存在点击无响应的问题，直接检查GridStack源码，在其内部生成每个cell的位置同样加上.contentShape(Rectangle())即可，部分老版本的GridStack实现会在内部裁剪视图导致手势被阻断。

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