20 11 月, 2023
By: LiHan
Jetpack Compose DatePicker
Jetpack Compose DatePicker
前言
目前在翻新專案的UI作成方式,改用Compose去建立UI,
途中遇到DatePicker的Compose元件,
翻找一些資料後,就實現出來了,於是就有了這篇筆記。
Dependency
這次使用函式庫的版本:bom:2023.10.01 ,裡面才有 DatePicker可以用...
dependencies {
implementation(
platform("androidx.compose:compose-bom:2023.10.01")
)
}
Simple
最簡單的方式可以直接呈現,選到的值從 state 裡面去取得再透過 SimpleDateFormat去轉換
就可以得到日期了!!
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
DatePicker(
state = datePickerState
)
Text(text = convertDate(datePickerState.selectedDateMillis?:0))
} |
Dialog
這個是將 DatePicker 弄成一個對話筐的方式,印象中以前的DatePickerDialog好像就是這樣.
注意:DatePickerDialog裡面的 confirmButton , dismissButton 是 Composable
@ExperimentalMaterial3Api
@Composable
private fun DatePickerDialog(
onDismiss : () -> Unit = {},
onConfirm : (String) -> Unit = {}
){
val datePickerState = rememberDatePickerState()
androidx.compose.material3.DatePickerDialog(
onDismissRequest = { onDismiss()},
confirmButton = {
Button(onClick = {
datePickerState.selectedDateMillis?.let {
onConfirm(convertDate(it))
}
onDismiss()
}) {
Text(text = "Done")
}
},
dismissButton = {
Button(onClick = onDismiss) {
Text(text = "Cancel")
}
}
) {
DatePicker(
state = datePickerState
)
}
} |
ConvertDate by Time
目前只想到這個簡單的方法去轉換.
private fun convertDate(time : Long) : String{
if (time == 0L) return ""
return SimpleDateFormat("yyyy-MM-dd").format(Date(time))
} |