【筆記】很陽春的 Jetpack compose 的日曆小範例 (By ChatGPT)

以下是一個使用 Jetpack Compose 創建的簡單的日曆應用程式的範例，其中包括顯示當前日期、創建事件和查看事件列表等功能：

@Composable
fun CalendarApp() {
    // 使用 remember 緩存當前選中日期
    var selectedDate by remember { mutableStateOf(LocalDate.now()) }
    // 使用 remember 緩存事件列表
    var events by remember { mutableStateOf(listOf<Event>()) }
    // 創建日期選擇對話框
    val datePickerDialog = rememberMaterialDatePicker(
        pickerBuilder = {
            setSelection(selectedDate.toEpochDay() * 86400000)
            setTitle("Select Date")
        },
        onDateSet = {
            selectedDate = LocalDate.ofEpochDay(it / 86400000)
        }
    )

    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        // 顯示當前日期
        Text(
            text = selectedDate.format(DateTimeFormatter.ofLocalizedDate(FormatStyle.LONG)),
            style = MaterialTheme.typography.h5,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        // 創建事件表單
        val eventText = remember { mutableStateOf("") }
        TextField(
            value = eventText.value,
            onValueChange = { eventText.value = it },
            label = { Text("Event") },
            modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp)
        )
        Button(
            onClick = {
                if (eventText.value.isNotEmpty()) {
                    events = events + Event(selectedDate, eventText.value)
                    eventText.value = ""
                }
            },
            modifier = Modifier.align(Alignment.End)
        ) {
            Text("Add Event")
        }
        // 顯示事件列表
        if (events.isEmpty()) {
            Text("No events for this day")
        } else {
            events.filter { it.date == selectedDate }.forEach { event ->
                Text(
                    text = "${event.time.format(DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT))} - ${event.text}",
                    style = MaterialTheme.typography.body1,
                    modifier = Modifier.padding(bottom = 8.dp)
                )
            }
        }
        // 顯示日期選擇按鈕
        Spacer(modifier = Modifier.weight(1f))
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = { datePickerDialog.show() }) {
                Text("Select Date")
            }
            Button(onClick = { events = listOf() }) {
                Text("Clear Events")
            }
        }
    }
}

data class Event(val date: LocalDate, val text: String, val time: LocalTime = LocalTime.now())

這個範例中，我們首先使用 remember 緩存了當前選中的日期和事件列表。然後，我們創建了一個日期選擇對話框，用於讓用戶選擇日期。接著，我們創建了一個 Column，在其中顯示了當前日期、創建事件表單、事件列表和日期選擇按鈕。使用者可以在事件表單中

輸入事件的文本並點擊“添加事件”按鈕將事件添加到事件列表中，並顯示在事件列表中。事件列表僅顯示當前選擇的日期中的事件。最後，我們提供了一個“清除事件”按鈕，用於刪除所有事件。

在這個範例中，我們使用了一些 Jetpack Compose 中的常見 UI 元素，例如 Text、TextField、Button 和 Spacer。我們還使用了 rememberMaterialDatePicker，它是 Jetpack Compose Material Design 擴展庫中的一個方法，用於創建 Material Design 样式的日期选择器對話框。

這只是一個簡單的日曆應用程式的範例，你可以在此基礎上進行擴展和修改，以滿足你自己的需求。

另外，你可能需要添加一些功能，例如：

• 編輯事件：讓用戶能夠編輯現有的事件，而不是僅能夠創建新事件。
• 刪除事件：讓用戶能夠從事件列表中刪除事件。
• 通知：當事件即將發生時，向用戶發送通知。
• 事件排序：按照日期或時間對事件進行排序，以便用戶更輕鬆地查看和管理事件。
• 日程表視圖：顯示每周或每月的事件日程表視圖，以便用戶能夠更清楚地了解自己的日程安排。

你可以使用 Jetpack Compose 中提供的許多其他 UI 元素和功能，例如 LazyColumn、AlertDialog、LocalNotification 等等，以實現這些功能。同時，你可以對樣式和佈局進行自定義，以創建一個獨特而實用的日曆應用程式。