SwiftUI - Apple Calendar 中的 DatePicker 风格

Question

我正在尝试构建一个设计类似于 Apple Calendar DatePicker 的 DatePicker，当您创建新的日历条目并单击 date/time 时：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

日期选择器知道要保留数据和相关标题。您不需要添加额外的文本

代码：

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)

                   }
               }
   }
}