SwiftUIでいこう！ - ScrollViewを使ったアプリ。

参考サイトを見ながら作っています。まずどんなアプリかというと。

ScrollViewを使って水平方向に画面の切り替えができるというものです。

構造を以下に図示してみました。

表示部分とデータ部分を切り離して、データをテンプレートにいれる形で画面を作っています。

ファイルとしては

ContentView.swift  ・・・表示部分(実際のデータを表示)
CardView.swift　・・・テンプレート
CardModel.swift　・・・　データモデル
CardData.swift　・・・　実際のデータ

表示部のテンプレートになる部分です。

import SwiftUI
struct CardView: View {
   
   var card:Card

   var body: some View {
       
       VStack {
           Image(systemName: card.imageName)
               .font(.largeTitle)   
           Text(card.title)
       }
       .frame(width: 335, height: 545)
       .background(Color.blue)
       .foregroundColor(.white)

   }
}

var card:Card

の部分の元となるものは、CardModel.swiftに記述していて、データのモデルになる部分です。id,title,imageNameを使っています。

import SwiftUI

struct Card:Identifiable {
   var id = UUID()
   var title:String
   var imageName:String
}

そして、実際のデータですが、

import SwiftUI

let cardData:[Card] = [Card(title: "Apple", imageName: "applelogo"),Card(title: "Cloud", imageName: "icloud")]

Card型のデータ実際の名前などを変数に入れていきます。

struct ContentView: View {
   var cards:[Card] = cardData
   
   var body: some View {
       ScrollView(.horizontal,showsIndicators:false){
       HStack(alignment: .center, spacing: 20) {
               ForEach(cards){ item in
                 
                  CardView(card: item)
               }
           }
       }.padding(20)
       
   }
}

ForEachでループを回します。変数cardsに入ったcardDataの中の実際のデータを読み込みCardViewのデータを書き換えます。

  ForEach(cards){ item in
       CardView(card: item)
  }

この場合"cardData"は2つのデータが入っていますので"item"でデータを渡して2画面ができます。" ScrollView"で".horizontal"としているので横スクロールで画面を変えることができます。