/

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”, “表單控制元件”]