いざ! SwiftUI -7 並べて表示
表示するための関連データを管理
まず使うデータを構造体で定義。構造体Eventを作ります。
struct Event {
let title: String
let date: Date
let location: String
let symbol: String
}
そしてViewの構造体
struct EventTile: View{}
を作って、さっき作った構造体Eventを変数eventに代入します。
プロパティをもう一つ定義しておきます。
表示させるのは以下。
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)
内容などのデータは
という感じで、構造体で定義した" Event "に関連付けしています。なので使うときには
let event = Event(title: "Buy Daisies", date: .now, location: "Flower Shop", symbol: "gift")
という感じで引数にデータを与えてやり変数にひとまとめにすることができます。こうすることで
と指定しているところに引数のデータが入っていきます。
最後に、モディファイアで余白(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)
}
}
この記事が気に入ったらサポートをしてみませんか?