SwiftUIでいこう！- スタンフォード大学Lecture 2 - 5 Grid。

HStackで横向きにカードを並べていましたが、ここで下の方にもカードを並べたいのでHStackからLazyVGridに変更します。

GridItem()

を入れ込むことで行を決めます。

 LazyVGrid(columns:[GridItem(),GridItem(),GridItem(){
               ForEach(emojis[0..<emojicount], id: \.self){emoji in
                   CardView(content:emoji).aspectRatio(2/3,contentMode:.fit)
               }
  }

3カラムにしています。

LazyVGrid(columns:[GridItem(),GridItem(),GridItem()])

カードの縦、横の長さを決めます。アスペクト比を指定します。

.aspectRatio(2/3,contentMode:.fit)

GridItem()を並べることで行を決めていましたが

.adaptive()

を使うことで同じように並べることができます。

 LazyVGrid(columns:[GridItem(.adaptive(minimum: 100))])

もう一つ、多くの絵文字を使う場合には画面から溢れる場合があるのでそれをスクロールさせて表させます。

ScrollView{}

を使います。

ここまでを合わせたコードは、

import SwiftUI

struct ContentView: View {
   var emojis = ["✈️","🐶","🐱","🐻","🚁","🚗","🚇","🚴‍♀️","🍎","🍌","🍍","🍇","🐢","🐸"]
   @State var emojicount = 14
   
   var body: some View {
       VStack{
           ScrollView{
               LazyVGrid(columns:[GridItem(.adaptive(minimum: 100))]){
                   ForEach(emojis[0..<emojicount], id: \.self){emoji in
                       CardView(content:emoji).aspectRatio(2/3,contentMode:.fit)
                   }
               }
           }
         
           Spacer()
           HStack{
               add
               Spacer()
              remove
           }
           .font(.largeTitle)
           .padding(.horizontal)
       }
       
       .padding(.horizontal)
       .foregroundColor(.red)
   }
   var add:some View{
       Button(action: {
           if emojicount < emojis.count{
               emojicount += 1
           }
       }, label: {
           VStack{
               Image(systemName: "plus.circle")
           }
       })
   }
   var remove:some View{
       Button(action: {
           if emojicount > 1{
           emojicount -= 1
           }
       }, label: {
           VStack{
               Image(systemName: "minus.circle")
           }
       })
   }
}