SwiftUI - стиль DatePicker, как в календаре Apple

Question

Я пытаюсь создать DatePicker, который имеет такой же дизайн, как Apple Calendar DatePicker, когда вы создаете новую запись в календаре и нажимаете на дату / время: DatePicker выскакивает под строкой выбранная дата.

То, чего я достиг на данный момент, позволяет DatePicker появляться в той же строке списка. Это работает, но не чувствует себя гладко. Кроме того, я хочу, чтобы первый DatePicker закрывался, когда другой открывается и не может найти команду, чтобы сделать это программно в SwiftUI:

                List {                        
                     Section(header:Text("Notification")){
                        HStack {
                            Text("Activate")
                            Spacer()
                            Toggle(isOn: toggle) {Text("") }
                        }
                        HStack {
                            Text("Mo. - Do.")
                            Spacer()

                            DatePicker("", selection: dateMoDo, displayedComponents: .hourAndMinute)
                                .colorInvert()
                                .colorMultiply(Color.red)
                                .labelsHidden()
                        }
                        HStack {
                            Text("Freitags")
                            Spacer()

                            DatePicker("", selection: dateFr, displayedComponents: .hourAndMinute)
                                .colorInvert()
                                .colorMultiply(Color.red)
                                .labelsHidden()
                        }
                    }
                  }.listStyle(GroupedListStyle())

Answer 1

Date Picker понимают, как хранить данные и связанные с ними названия. Вам не нужно добавлять дополнительный текст

Код:

import SwiftUI
import UIKit

struct ContentView: View {
    @State private var selectedDate = Date()
   var body: some View {
            Form {
                   Section {
                       DatePicker(
                           selection: $selectedDate,
                           displayedComponents: .hourAndMinute,
                           label: { Text("Mo. - Do.") }
                        ).colorInvert().colorMultiply(Color.red)

                        DatePicker(
                           selection: $selectedDate,
                           displayedComponents: .hourAndMinute,
                           label: { Text("Freitags") }
                        ).colorInvert().colorMultiply(Color.red)

                   }
               }
   }
}