這是一個包含 DatePicker
、Toggle
(打勾的功能)、AlertView
的簡單 ToDo List
SwiftUI 範例。此範例展示如何創建待辦事項列表,每個項目都有打勾的功能,以及點選完成後變色。並且會使用 DatePicker
來選擇日期與時間。
以下是完整的 SwiftUI 代碼:
import SwiftUI
struct TodoItem: Identifiable {
let id = UUID()
var task: String
var isCompleted: Bool = false
var dueDate: Date = Date()
}
struct ContentView: View {
@State private var todoItems: [TodoItem] = []
@State private var newTask: String = ""
@State private var showAlert = false
@State private var dueDate = Date()
var body: some View {
NavigationView {
VStack {
HStack {
TextField("Enter new task", text: $newTask)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horizontal)
DatePicker("", selection: $dueDate, displayedComponents: [.date, .hourAndMinute])
.labelsHidden()
.padding(.trailing)
Button(action: {
addNewTask()
}) {
Image(systemName: "plus.circle.fill")
.font(.largeTitle)
.foregroundColor(.blue)
}
}
.padding()
List {
ForEach(todoItems) { item in
HStack {
Toggle(isOn: Binding(
get: { item.isCompleted },
set: { newValue in
markCompleted(item: item, isCompleted: newValue)
}
)) {
Text(item.task)
.strikethrough(item.isCompleted)
.foregroundColor(item.isCompleted ? .gray : .primary)
}
Spacer()
Text("\(item.dueDate, style: .date) \(item.dueDate, style: .time)")
.font(.caption)
.foregroundColor(.secondary)
}
}
.onDelete(perform: deleteTask)
}
}
.navigationTitle("ToDo List")
.navigationBarItems(trailing: EditButton())
.alert(isPresented: $showAlert) {
Alert(
title: Text("Error"),
message: Text("Task cannot be empty."),
dismissButton: .default(Text("OK"))
)
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
private func addNewTask() {
guard !newTask.isEmpty else {
showAlert = true
return
}
let newItem = TodoItem(task: newTask, dueDate: dueDate)
todoItems.append(newItem)
newTask = ""
dueDate = Date()
}
private func markCompleted(item: TodoItem, isCompleted: Bool) {
if let index = todoItems.firstIndex(where: { $0.id == item.id }) {
todoItems[index].isCompleted = isCompleted
}
}
private func deleteTask(at offsets: IndexSet) {
todoItems.remove(atOffsets: offsets)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
TodoItem
模型:每個待辦事項由 task
(任務名稱)、isCompleted
(是否完成) 和 dueDate
(到期日期) 組成。UUID
用於唯一標識每個項目。
ContentView
結構:
@State
管理待辦清單 (todoItems
)、新任務 (newTask
) 和其他狀態變數。TextField
:用於輸入新任務。DatePicker
:允許用戶選擇日期和時間。Button
:點擊加號按鈕後,調用 addNewTask()
方法將新任務加入清單。List
:顯示所有待辦事項,並為每個項目提供一個 Toggle
,以允許打勾標記完成。標記完成的項目會顯示刪除線並變灰色。Alert
:當試圖添加空任務時,彈出錯誤提示。功能實現:
addNewTask()
:確保新任務不為空,否則彈出警告提示。markCompleted()
:用來標記任務是否完成,並更新界面顯示。deleteTask(at:)
:允許用戶滑動刪除任務。ContentView_Previews
提供 Xcode 的 SwiftUI 預覽功能,方便開發時即時查看效果。這樣的應用已包含最基本的待辦事項功能,並且符合 SwiftUI 的最佳實踐,方便未來擴展和維護。