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日ごとに段をかえて表示ができるようになりました。