? ? ? ? 這一節主要了解一下Compose中的DatePicker,DatePicker是一個用于選擇日期的組件,它提供了直觀的界面讓用戶可以通過日歷視圖或直接輸入來選擇年、月、日。我們在開發中時常會用到日期選擇器,簡單總結如下:
API:
DatePickerDialog
onDismissRequest:當用戶想要關閉對話框時會觸發這個回調函數。
confirmButton:用于定義對話框中確認按鈕的 UI 和行為。
dismissButton:用于定義對話框中取消按鈕的 UI 和行為。
modifier:可對對話框的布局和外觀進行修改。
shape:能設置對話框的形狀,例如圓角。
backgroundColor:可設置對話框的背景顏色。
contentColor:能設置對話框內容的顏色。
DatePicker
state:用于管理 DatePicker 的狀態,像選中的日期、顯示模式等都由它管理。
showMode:可設置日期選擇的顯示模式,有Calendar(日歷模式)和Input(輸入模式)兩種。
modifier:可對 DatePicker 的布局和外觀進行修改。
yearsRange:用于設置可選擇的年份范圍。
initialDateMillis:能設置 DatePicker 初始顯示的日期。
onDateSelected:當用戶選擇日期時會觸發這個回調函數。
colors:可自定義 DatePicker 的顏色,例如選中日期的顏色、標題的顏色等。
栗子:
import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleDatePickerExample() {val context = LocalContext.currentval datePickerState = rememberDatePickerState()val showDatePicker = remember { mutableStateOf(false) }val selectedDate = remember { mutableStateOf("") }Button(onClick = { showDatePicker.value = true }) {Text("選擇日期")}if (selectedDate.value.isNotEmpty()) {Text("已選擇日期: ${selectedDate.value}")}if (showDatePicker.value) {DatePickerDialog(onDismissRequest = { showDatePicker.value = false },confirmButton = {TextButton(onClick = {val formatter = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())selectedDate.value = datePickerState.selectedDateMillis?.let {formatter.format(Date(it))} ?: "未選擇日期"showDatePicker.value = false}) {Text("確定")}},dismissButton = {TextButton(onClick = { showDatePicker.value = false }) {Text("取消")}}) {DatePicker(state = datePickerState)}}
}
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SelectableDates
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.DialogProperties
import java.text.SimpleDateFormat
import java.util.Calendar
import java.util.Date
import java.util.Locale@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerExample() {var showDatePicker by remember { mutableStateOf(false) }
// val datePickerState = rememberDatePickerState()val selectedDateText = remember { mutableStateOf("") }val today = remember {val calendar = Calendar.getInstance()calendar.set(Calendar.HOUR_OF_DAY, 0)calendar.set(Calendar.MINUTE, 0)calendar.set(Calendar.SECOND, 0)calendar.set(Calendar.MILLISECOND, 0)calendar.timeInMillis}val datePickerState = rememberDatePickerState(initialSelectedDateMillis = today,selectableDates = object : SelectableDates {override fun isSelectableDate(utcTimeMillis: Long): Boolean {return utcTimeMillis >= today}override fun isSelectableYear(year: Int): Boolean {val currentYear = Calendar.getInstance().get(Calendar.YEAR)return year >= currentYear && year <= currentYear + 10 // 未來10年}})Column(Modifier.padding(16.dp)) {// 顯示選中的日期Text(text = if (selectedDateText.value.isNotEmpty()) {"選中的日期: ${selectedDateText.value}"} else {"請選擇日期"},modifier = Modifier.padding(bottom = 16.dp))// 觸發日期選擇器的按鈕Button(onClick = { showDatePicker = true }) {Text("選擇日期")}if (showDatePicker) {DatePickerDialog(onDismissRequest = { showDatePicker = false },confirmButton = {Button(onClick = {val selectedDate = datePickerState.selectedDateMillisif (selectedDate != null) {selectedDateText.value = formatDate(selectedDate)}showDatePicker = false}, modifier = Modifier.wrapContentSize()) {Text("確定")}},modifier = Modifier,dismissButton = {TextButton(onClick = { showDatePicker = false }, modifier = Modifier.wrapContentSize()) {Text("取消")}}, properties = DialogProperties(usePlatformDefaultWidth = false)){DatePicker(state = datePickerState,modifier = Modifier.fillMaxWidth(), showModeToggle = false)}}}
}// 日期格式化工具方法
private fun formatDate(timestamp: Long): String {val date = Date(timestamp)return SimpleDateFormat("yyyy-MM-dd", Locale.getDefault()).format(date)
}
注意:
1. 日期格式與本地化處理
DatePickerState.selectedDateMillis獲取的是時間戳,需手動轉換為可讀格式(如 "YYYY-MM-DD")。