ボタンを押した時にDatePickerをモーダルで表示し、カレンダーの外を選択した時にモーダルを閉じるビューを作成してみます。
struct ContentView: View {
@State var showDatePicker = false
@State var date = Date()
var body: some View {
VStack {
Button {
showDatePicker.toggle()
} label: {
Text("Button")
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.overlay {
ZStack{
if showDatePicker {
Rectangle()
.fill(.ultraThinMaterial)
.ignoresSafeArea()
.onTapGesture {
showDatePicker = false
}
DatePicker.init("", selection: $date)
.datePickerStyle(.graphical) // カレンダーを表示
.padding()
.background(.white, in: RoundedRectangle(cornerRadius: 10, style: .continuous)) // 背景を角丸に
.padding()
}
}
.animation(.easeIn, value: showDatePicker)
}
}
}まず、.frame(maxWidth: .infinity, maxHeight: .infinity) で一番上の階層の VStack を画面フルサイズに指定します。
そして、そのビューに対して overlay で DatePicker を重ねます。表示・非表示にはアニメーション（今回は easeInOut ）を設定してモーダル感を出しましょう。
