Press "Enter" to skip to content

【SwiftUI】モーダルを自作してDatePickerを表示する

ボタンを押した時に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 )を設定してモーダル感を出しましょう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です