Day20:使用核取方塊元件來完成代辦事項，並將其同步到GOOGLE Task

16th鐵人賽

jklu7limj

2024-10-04 20:35:45

55 瀏覽

分享至

前言

昨天我們處理好自動刷新的功能後，今天來處理一個之前弄代辦事項元件時沒有加上的功能，對我來說，完成代辦事項的事件後，還要打開網頁去勾選他，有點太麻煩了，因此，我決定將這個動作放在app上解決，這樣我完成該task後就可以直接在app上完成他。

更新的程式碼

1.GoogleTask

我們在GoogleTask新增一個updateTaskStatus()用來更新Google Tasks任務的狀態，將任務的狀態標記為 "已完成"或"待處理"，並將此更改同步到Google Tasks。
程式碼如下

kotlin

fun updateTaskStatus(task: Task, isCompleted: Boolean, onSuccess: () -> Unit, onError: (Exception) -> Unit) {
    CoroutineScope(Dispatchers.IO).launch {
        try {
            task.status = if (isCompleted) "completed" else "needsAction"
            tasksService?.tasks()?.update(task.listId, task.id, task)?.execute()
            withContext(Dispatchers.Main) {
                onSuccess()
            }
        } catch (e: Exception) {
            Log.e("GoogleTask", "Error updating task status", e)
            withContext(Dispatchers.Main) {
                onError(e)
            }
        }
    }
}

task: Task：這是你希望更新的 Google Task 任務對象。
isCompleted: Boolean：用來決定任務是"已完成"(true)還是"待處理"(false)。

2.ToDoList

同慈我們需要修改負責處理代辦事項元件的ToDoList，在裡面加入核取方塊，當我們點擊核取方塊時，會觸發一個回調onTaskChecked(task, isChecked)會傳遞當前核取方塊的狀態（已勾選或未勾選）來更新該任務的狀態。
程式碼如下

kotlin

@Composable
fun ToDoList(tasks: List<Task>, onTaskChecked: (Task, Boolean) -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(8.dp)
            .background(MaterialTheme.colorScheme.background)
    ) {
        if (tasks.isNotEmpty()) {
            tasks.forEach { task ->
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .padding(vertical = 8.dp)
                        .fillMaxWidth()
                ) {
                    Checkbox(
                        checked = task.status == "completed",
                        onCheckedChange = { isChecked ->
                            onTaskChecked(task, isChecked)
                        },
                        modifier = Modifier.padding(end = 8.dp)
                    )
                    Text(
                        text = task.title ?: "無標題",
                        style = TextStyle(
                            fontSize = 18.sp,
                            color = MaterialTheme.colorScheme.onSurface
                        ),
                        modifier = Modifier.padding(start = 8.dp)
                    )
                }
            }
        } else {
            Text(
                text = "無代辦事項",
                style = TextStyle(
                    fontSize = 20.sp,
                    color = MaterialTheme.colorScheme.onSurface
                ),
                modifier = Modifier.fillMaxWidth().padding(16.dp),
                textAlign = TextAlign.Center
            )
        }
    }
}

3.修改fetchTasks上顯示代辦事項的條件

為了讓已完成的task能夠消失，我們需要修改fetchTasks上顯示代辦事項的條件使用filter函數來過濾只顯示狀態不等於"completed"的任務，並保存過濾後的結果傳遞給ToDoList組件來顯示，這樣我們的應用只會顯示尚未完成的任務。
程式碼如下

kotlin

googleTask?.fetchTasks(
    onTasksFetched = { taskList ->
        // 過濾出未完成的任務
        tasks = taskList.filter { task -> 
            task.status != "completed" // 只顯示未完成的 task
        }
        Log.d("MainActivity", "Fetched ${tasks.size} incomplete tasks from Google Tasks")
    },
    onError = { error ->
        Log.e("MainActivity", "Error fetching tasks: ${error.message}")
    }
)

4.修改CalendarLayout代辦事項區塊

做完上述的步驟後，我們需要修改CalendarLayout代辦事項區塊的程式碼
程式碼如下

kotlin

ToDoList(tasks = tasks) { task, isChecked ->
                            googleTask?.updateTaskStatus(taskListId = "@default",
                                task = task,
                                isCompleted = isChecked,
                                onSuccess = {
                                    // 更新任務狀態在 UI 上
                                    tasks = tasks.filter { currentTask ->
                                        currentTask.status != "completed"
                                    }
                                    Toast.makeText(
                                        context,
                                        "Task updated successfully",
                                        Toast.LENGTH_SHORT
                                    ).show()
                                },
                                onError = { e ->
                                    Toast.makeText(
                                        context,
                                        "Error updating task: ${e.message}",
                                        Toast.LENGTH_SHORT
                                    ).show()
                                }
                            )
                        }

為了測試我們今天的功能，我在我的TASK中新增了鐵人賽任務

這時我們的APP上的代辦事項區塊會顯示出帶有核取方塊元件的鐵人賽任務

然後我們點擊鐵人賽任務，可以看到他跳出了成功執行的Toast

最後我們回到網頁上的TASK中可以看到鐵人賽任務已經變成已完成了

後話

我們今天新增了完成代辦事項的事件並同步到Google Tasks的功能，基本上目前的APP已經很符合我平常工作和確認事件的習慣了，鐵人賽寫到現在還有10天，還剩語音功能和USB資料庫的功能，基本上這兩個功能並不是我平常使用習慣的剛需，因此我得想想接下來要如何將這兩個功能加入我的APP之中，今天內容就到這邊，感謝你的觀看，我們明天再見。