选择器中的 LazyVGrid，使用 SwiftUI答案

【问题标题】：LazyVGrid inside a Picker, using SwiftUI选择器中的 LazyVGrid，使用 SwiftUI
【发布时间】：2021-12-24 04:42:48
【问题描述】：

在下面的代码中，选择器效果很好，但是 LazyVGrid 仅显示为一列（应该是三列，如 pickColorTable var 所示）。

var pickColorTable:[GridItem] = Array(repeating: .init(.flexible(), spacing: 5), count: 3)

Form {
      LazyVGrid(columns: pickColorTable, spacing: 5) {
          Picker("Color", selection: $pickColor) {
            ForEach(colorTable, id: \.self) { color in
                  Rectangle()
                     .frame(width: 70, height: 70)
                     .foregroundColor(Color(color))
                      .cornerRadius(20)
             }
          }
       }
   }

另一方面，如果第二行与第三行交换，如下面的代码，LazyVGrid 正确渲染，但选择器停止工作（当我单击所需颜色时没有任何反应）。

 Form {
      Picker("Color", selection: $pickColor) {
          LazyVGrid(columns: pickColorTable, spacing: 5) {
            ForEach(colorTable, id: \.self) { color in
                  Rectangle()
                     .frame(width: 70, height: 70)
                     .foregroundColor(Color(color))
                      .cornerRadius(20)
             }
          }
       }
   }

有没有人有提示让 LazyVGrid 在选取器中正常工作？

【问题讨论】：

标签： forms swiftui picker lazyvgrid

【解决方案1】：

出现的问题是您的 Picker 的内容是 LazyVGrid 而不是 Rectangles 的列表。您可以做的是为每个矩形添加一个点击手势。然后手动变异pickColor为例

Form {
    Picker("Color", selection: $pickColor) {
      LazyVGrid(columns: pickColorTable, spacing: 5) {
            ForEach(colorTable, id: \.self) { color in
              Rectangle()
                .frame(width: 70, height: 70)
                .foregroundColor(Color(color))
                .cornerRadius(20)
                .onTapGesture {
                  pickColor = color
                }
            }
          }
        }
}

【讨论】：