如何使用SwiftUI在macOS端实现自定义WebView的动态LazyVGrid

LazyVGrid是当前场景的最优实现方案，无需更换技术思路，你遇到的自适应列数问题是因为写死了两列的GridItem配置，通过动态计算列数即可解决。

完整修改代码 #

struct GridLayout: View {
  let data: [String]
  enum dataType { case title; case url }
  // 和CodeView的minWidth保持一致即可
  private let minCardWidth: CGFloat = 300
  // 最大支持列数，不需要3列就改成2
  private let maxColumnCount = 3
  
  func get(_ forType: dataType, _ string: String) -> String {
    if forType == .title { return string.components(separatedBy: "*")[0] }
    if forType == .url { return string.components(separatedBy: "*")[1] }
    return ""
  }
  
  var body: some View {
    GeometryReader { proxy in
      // 计算当前宽度下可容纳的列数，预留16*2的左右内边距 + 列间距
      let availableWidth = proxy.size.width - 32
      let calculateColumn = Int(availableWidth / minCardWidth)
      let finalColumnCount = min(maxColumnCount, max(1, calculateColumn))
      let columns = Array(repeating: GridItem(.flexible(), spacing: 16), count: finalColumnCount)
      
      ScrollView {
        LazyVGrid(columns: columns, spacing: 16) {
          ForEach(data, id: \.self) { i in
            CodeView(title: get(.title, i), height: 500, url: get(.url, i))
              .frame(minWidth: minCardWidth, idealWidth: 400, maxWidth: .infinity, alignment: .center)
          }
        }
        .padding(16)
      }
      .frame(width: proxy.size.width, height: proxy.size.height)
    }
  }
}

适配逻辑说明 #

• 窗口宽度<600时自动切换为单栏布局，符合窗口缩小的适配需求
• 窗口宽度≥900时自动扩展为3栏布局，满足超宽屏适配需求，不需要的话直接把maxColumnCount改为2即可
• 所有间距、内边距参数均可根据你的设计风格自行调整，原有逻辑完全保留无侵入修改

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