1

以下のコードでは、ピッカーはうまく機能しますが、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)
             }
          }
       }
   }

画像1

また、次のコードのように 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)
             }
          }
       }
   }

画像2

LazyVGrid をピッカー内で適切に動作させるためのヒントはありますか?

4

1 に答える 1