SwiftUI - Apple 日历中的 DatePicker 样式答案

【问题标题】：SwiftUI - DatePicker-style like in Apple CalendarSwiftUI - Apple 日历中的 DatePicker 样式
【发布时间】：2020-05-04 14:53:12
【问题描述】：

我正在尝试构建一个具有类似 Apple 日历 DatePicker 设计的 DatePicker，当您创建一个新的日历条目并单击日期/时间时：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())

【问题讨论】：

标签： ios swift xcode datepicker swiftui

【解决方案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)

                   }
               }
   }
}

【讨论】：