這是整個系列的最後一篇(應用部分)，會徹底地完成這個App

功能盤點

1. todo 更改功能
2. todo 刪除功能
3. todo list排序
   就剩下這些功能的UI還沒有完善了，之後還要手動的輸資料使用看看確認沒問題

更改與刪除

在前面的時候就已經預留了更改予刪除的函數參數，因此只要把UI填上並確認一下邏輯就好
但是直接加上有點太緊湊了，所以把content放到下面，注意要把weight的部分刪除

Column(  
    modifier = Modifier.fillMaxWidth(0.85f),  
) {  
    Row(  
        verticalAlignment = Alignment.CenterVertically,  
        modifier = Modifier.fillMaxWidth(),  
    ) {  
        Text(  
            todoItem.title,  
            modifier = Modifier.weight(2f),  
            fontSize = 18.sp,  
            fontWeight = FontWeight.Bold  
        )  
        IconButton(  
            onClick = {onModified()},  
            modifier = Modifier.weight(1f)  
        ) {  
            Icon(Icons.Default.Create, "Modify")  
        }  
        IconButton(  
            onClick = {onDelete()},  
            modifier = Modifier.weight(1f)  
        ) {  
            Icon(Icons.Default.Delete, "Delete")  
        }  
        Checkbox(  
            checked = todoItem.done,  
            onCheckedChange = { onChecked(it) },  
            modifier = Modifier.weight(1f)  
        )  
    }  
    Text(  
        todoItem.content,  
        modifier = Modifier,  
        fontSize = 14.sp,  
        fontWeight = FontWeight.Light  
    )  
}

ViewModel還沒有刪除的函數，增加一個

fun deleteTodo(todoItem: TodoItem) {  
    viewModelScope.launch(Dispatchers.IO) {  
        todoDao.delete(todoItem)  
    }  
}

將這些都套用上去，並且將input的button部分更改就可以成功的更改

Button(  
    onClick = {  
        globalVM.submitTodo(TodoItem(currentTodo.id, title, content, group))  
        showDialog = true  
    }  
) {  
    Text("Submit")  
}

但是現在會被卡在input的頁面中無法回到todo list，這就是我前面提到的情況，這時通常有三種作法

• 關掉save state
• 如果是更新的話自動popbackstack返回
• (本文未教)使用navigation compose的dialog
  這邊我簡單處理，直接把save state拔掉

// bottom nav
navController.navigate(item.route) {  
    popUpTo(navController.graph.findStartDestination().id)  
    launchSingleTop = true  
}

排序

首先把ViewModel中取得todo flow的部分更改，讓他可以知道需要的list是不是排序過的

fun getGroupTodo(group: String, sorted: Boolean): Flow<List<TodoItem>> {  
    if (sorted) return todoDao.getGroupItemsSorted(group)  
    return todoDao.getGroupItems(group)  
}

之後可以在TodoDisplay的部分獲得Setting資料並獲取對應的list

val shouldSort by SettingManager.getValueFlow(AppPreference.FINISHED_DESC).collectAsState(false)  
val todoList by globalVM.getGroupTodo(group, shouldSort).collectAsState(emptyList())

雖然說現在的表會自動排列了，但是他的反應十分的即時，其實有點打亂使用節奏，有兩種方式可以改進

• 只取得原始表，在UI那邊處理排序問題
• (未教)使用Animation讓移動變順暢
  這個專案到這裡就已經完成了，下一篇會講如何把它給分享出去