选择器内部的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
                }
            }
          }
        }
}