いざ！ SwiftUI -7 並べて表示

Organizing and aligning content with stacks | Apple Developer Documentation

表示するための関連データを管理

まず使うデータを構造体で定義。構造体Eventを作ります。

struct Event {
    let title: String
    let date: Date
    let location: String
    let symbol: String
}

そしてViewの構造体

struct EventTile: View{}

を作って、さっき作った構造体Eventを変数eventに代入します。

let event: Event

プロパティをもう一つ定義しておきます。

let stripeHeight = 15.0

表示させるのは以下。

var body: some View { }

HStack（横並び）、VStack（縦並び）を使ってViewを作っていきます。

　　　　HStack(alignment: .firstTextBaseline) {   
            Image(systemName: event.symbol)
                .font(.title) 
            VStack(alignment: .leading) {    
                Text(event.title)    
                    .font(.title)     
                Text(
                    event.date,
                    format: Date.FormatStyle()          
                        .day(.defaultDigits)                 
                        .month(.wide)              
                )           
                Text(event.location)           
            }          
        }

まず、HStack、横並び。

 Image()

VStack()

の二つが並びます。イメージとしては

横並べにした片方がVStack()なのでその中はText()が3つ。

　　　　　　　 　　Text(event.title)    
                    .font(.title)     
                Text(
                    event.date,
                    format: Date.FormatStyle()          
                        .day(.defaultDigits)                 
                        .month(.wide)              
                )           
                Text(event.location)   

内容などのデータは

Image(systemName: event.symbol)

という感じで、構造体で定義した" Event "に関連付けしています。なので使うときには

let event = Event(title: "Buy Daisies", date: .now, location: "Flower Shop", symbol: "gift")

という感じで引数にデータを与えてやり変数にひとまとめにすることができます。こうすることで

event.symbol

と指定しているところに引数のデータが入っていきます。

最後に、モディファイアで余白(padding)、文字の背景(background)に色をつけ、角丸(clipShape)にしています。

　　　   .padding()    
        .padding(.top, stripeHeight)       
        .background {     
            ZStack(alignment: .top) {           
                Rectangle()            
                    .opacity(0.3)              
                Rectangle()                
                    .frame(maxHeight: stripeHeight)               
            }          
            .foregroundColor(.teal)            
        }     
        .clipShape(RoundedRectangle(cornerRadius: stripeHeight, style: .continuous))  

全体のコード

EventTileファイル

import SwiftUI


struct Event {
    
    let title: String
    let date: Date 
    let location: String
    let symbol: String  
}

struct EventTile: View {  
    let event: Event
    let stripeHeight = 15.0
    var body: some View {   
        HStack(alignment: .firstTextBaseline) {   
            Image(systemName: event.symbol)
                .font(.title) 
            VStack(alignment: .leading) {    
                Text(event.title)    
                    .font(.title)     
                Text(
                    event.date,
                    format: Date.FormatStyle()          
                        .day(.defaultDigits)                 
                        .month(.wide)              
                )           
                Text(event.location)           
            }          
        }
        .padding()    
        .padding(.top, stripeHeight)       
        .background {
            
            ZStack(alignment: .top) {           
                Rectangle()            
                    .opacity(0.3)              
                Rectangle()                
                    .frame(maxHeight: stripeHeight)               
            }          
            .foregroundColor(.teal)            
        }     
        .clipShape(RoundedRectangle(cornerRadius: stripeHeight, style: .continuous))       
    }
}

ContentViewファイル

"ContentView"に実際の表示させる構造体に引数を入れてさせます。

import SwiftUI

struct ContentView:View{

    let event = Event(title: "Buy Daisies", date: .now, location: "Flower Shop", symbol: "gift")
    
    var body: some View {        
      EventTile(event: event)  
    }
}