SwiftUIでいこう! - カレンダー 2
それではカレンダーっぽくしていきます。まずは曜日を入れていきます。
"ContentView"に書いていきます。
var body: some View {
DateScrollerView()
.environmentObject(dateHolder)
dayOfWeekStack
}
DateScrollerView()の並びに曜日を表示させる"dayOfWeekStack"を作ります。
dayOfWeekStackのコードですが、HStackを使って横並びにします。表示は"Text()"を使って" Text("Sun")"のように曜日を指定していきます。綺麗に並べるために"Text"を拡張して、メソッドを追加します。
HStackを横幅いっぱいに表示する"frame(maxWidth: .infinity)"を使っています。
extension Text
{
func dayOfWeek() -> some View
{
self.frame(maxWidth: .infinity)
.padding(.top, 1)
.lineLimit(1)
}
}
そのメソッドを使って
var dayOfWeekStack: some View{
HStack(spacing: 1){
Text("Sun").dayOfWeek()
Text("Mon").dayOfWeek()
Text("Tue").dayOfWeek()
Text("Wed").dayOfWeek()
Text("Thu").dayOfWeek()
Text("Fri").dayOfWeek()
Text("Sat").dayOfWeek()
}
}
として実行すると
横並びに曜日が綺麗に並べ流ことができました。
あとはカレンダーの主役、日にちを7日ごとにずらして表示させます。
原理は
var calendarGrid: some View{
VStack(spacing: 1){
ForEach(0..<6) { row in
HStack(spacing: 1){
ForEach(1..<8){ colum in
Text("\( colum + (row * 7))")
}
}
}
}
}
とします。実行すると
のように1から順番に7日ごとに段をかえて表示ができるようになりました。
この記事が気に入ったらサポートをしてみませんか?