以下のコードでは、ピッカーはうまく機能しますが、LazyVGrid は 1 列しか表示されません (pickColorTable 変数に示されているように、3 列である必要があります)。
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)
}
}
}
}
また、次のコードのように 2 行目を 3 行目に入れ替えると、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 をピッカー内で適切に動作させるためのヒントはありますか?