Picker 中的 LazyVGrid，使用 SwiftUI

Question

在下面的代码中，选择器工作得很好，但是 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 在选择器中正常工作的提示？

Answer 1

出现的问题是您的选择器的内容是 LazyVGrid 而不是 Rectangle 的列表。您可以做的是为每个矩形添加一个点击手势。然后手动改变 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
                }
            }
          }
        }
}

Picker 中的 LazyVGrid，使用 SwiftUI

LazyVGrid inside a Picker, using SwiftUI

forms

picker

swiftui

lazyvgrid