/

SwiftUI 表單:DatePicker

SwiftUI 表單:DatePicker

在 SwiftUI 中,DatePicker 表單控制元件讓我們可以創建一個…日期選擇器。

它是如何運作的呢?

首先,我們創建一個 Date 型別的屬性:

1
@State private var dateChosen = Date()

我們使用 @State 來讓我們能夠從 DatePicker 視圖中修改這個值。

然後,我們將這個屬性連接到 DatePicker 視圖:

1
2
3
DatePicker(selection: $dateChosen, in: ...Date()) {
Text("選擇日期和時間")
}

它的外觀如下所示:

點擊不同的部分(日期或時間)將會顯示專用的選擇器界面元素:

以下是這個例子的完整程式碼:

1
2
3
4
5
6
7
8
9
10
11
struct ContentView: View {
@State private var dateChosen = Date()

var body: some View {
Form {
DatePicker(selection: $dateChosen, in: ...Date()) {
Text("選擇日期和時間")
}
}
}
}

你可以選擇只顯示日期的特定元素,使用 displayedComponents 屬性,例如只顯示日期:

1
2
3
DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .date) {
Text("選擇日期和時間")
}

或者只顯示時間:

1
2
3
DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .hourAndMinute) {
Text("選擇日期和時間")
}

tags: [“SwiftUI”, “DatePicker”, “表單控制元件”]