AI生成,调试出来学习,这些小组件会用了,就可以组合一个大点的程序了。
package com.example.mydatetime import android.app.AlertDialog import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.* import androidx.compose.foundation.clickable import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.Alignment import androidx.compose.ui.unit.dp import java.time.LocalDateTime import java.time.format.DateTimeFormatter import java.util.* import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.window.Dialog import com.example.mydatetime.ui.theme.MyDateTimeTheme import java.time.Instant import java.time.LocalDate import java.time.LocalTime import java.time.ZoneId class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { MyDateTimeTheme { DateAndTimePickerApp() } } } } @OptIn(ExperimentalMaterial3Api::class) @Composable fun DatePickerDialog( onDismissRequest: () -> Unit, onDateSelected: (LocalDate) -> Unit ) { // 获取当前日期 val currentDate = LocalDate.now() // 创建DatePicker状态,并初始化为当前日期 val datePickerState = rememberDatePickerState(initialSelectedDateMillis = currentDate.atStartOfDay(ZoneId.systemDefault()).toInstant().toEpochMilli()) // 创建对话框 Dialog( onDismissRequest = onDismissRequest, ) { // 使用Column布局来组织对话框内容 Column( modifier = Modifier .fillMaxWidth() .padding(16.dp) ) { // 显示标题 Text( text = "Select Date", style = MaterialTheme.typography.headlineSmall, modifier = Modifier.padding(bottom = 16.dp) ) // 显示日期选择器 DatePicker(state = datePickerState) // 使用Row布局来组织按钮 Row( modifier = Modifier .fillMaxWidth() .padding(top = 16.dp), horizontalArrangement = Arrangement.End ) { // 取消按钮 Button( onClick = onDismissRequest, modifier = Modifier.padding(end = 8.dp) ) { Text("Cancel") } // 确定按钮 Button(onClick = { // 获取选中的日期 val selectedDate = LocalDate.ofInstant( Instant.ofEpochMilli(datePickerState.selectedDateMillis ?: currentDate.atStartOfDay(ZoneId.systemDefault()).toInstant().toEpochMilli()), ZoneId.systemDefault() ) // 调用回调函数,传递选中的日期 onDateSelected(selectedDate) }) { Text("OK") } } } } } @OptIn(ExperimentalMaterial3Api::class) // 使用实验性API的注解 @Composable // 标记为可组合函数 fun TimePickerDialog( onDismissRequest: () -> Unit, // 对话框关闭时的回调函数 onTimeSelected: (LocalTime) -> Unit // 时间选择后的回调函数 ) { val currentTime = LocalTime.now(ZoneId.systemDefault()) // 获取当前时间 val timePickerState = rememberTimePickerState(initialHour = currentTime.hour, initialMinute = currentTime.minute) // 创建时间选择器的状态,并初始化为当前时间 Dialog( onDismissRequest = onDismissRequest, // 设置对话框关闭的回调函数 ) { Column( modifier = Modifier .fillMaxWidth() // 填充父布局的宽度 .padding(16.dp) // 设置内边距 ) { Text( text = "Select Time", // 显示文本 style = MaterialTheme.typography.headlineSmall, // 使用主题中的小标题样式 modifier = Modifier.padding(bottom = 16.dp) // 设置底部内边距 ) TimePicker(state = timePickerState) // 显示时间选择器 Row( modifier = Modifier .fillMaxWidth() // 填充父布局的宽度 .padding(top = 16.dp), // 设置顶部内边距 horizontalArrangement = Arrangement.End // 水平排列方式为靠右 ) { Button( onClick = onDismissRequest, // 点击按钮时调用关闭回调函数 modifier = Modifier.padding(end = 8.dp) // 设置右边距 ) { Text("Cancel") // 显示取消文本 } Button(onClick = { val selectedTime = LocalTime.of(timePickerState.hour, timePickerState.minute) // 获取选中的时间 onTimeSelected(selectedTime) // 调用时间选择后的回调函数 }) { Text("OK") // 显示确定文本 } } } } } @Composable fun DateAndTimePickerApp() { // 记住是否显示日期选择器的状态 var showDatePicker by remember { mutableStateOf(false) } // 记住是否显示时间选择器的状态 var showTimePicker by remember { mutableStateOf(false) } // 记住当前选中的日期和时间 var selectedDateTime by remember { mutableStateOf(LocalDateTime.now()) } // 日期格式化器 val dateFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd", Locale.getDefault()) // 时间格式化器 val timeFormatter = DateTimeFormatter.ofPattern("HH:mm", Locale.getDefault()) // 使用Column布局,垂直居中,水平居中 Column( modifier = Modifier .fillMaxSize() .padding(16.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { // 显示当前日期 Text( text = "Date: ${selectedDateTime.format(dateFormatter)}", style = MaterialTheme.typography.bodyLarge, modifier = Modifier .clickable { showDatePicker = true } // 点击时显示日期选择器 .padding(8.dp) ) Spacer(modifier = Modifier.height(16.dp)) // 添加间距 // 显示当前时间 Text( text = "Time: ${selectedDateTime.format(timeFormatter)}", style = MaterialTheme.typography.bodyLarge, modifier = Modifier .clickable { showTimePicker = true } // 点击时显示时间选择器 .padding(8.dp) ) // 日期选择器 if (showDatePicker) { DatePickerDialog( onDismissRequest = { showDatePicker = false }, // 点击外部时关闭日期选择器 onDateSelected = { date -> // 更新选中的日期 selectedDateTime = selectedDateTime.withYear(date.year).withMonth(date.monthValue).withDayOfMonth(date.dayOfMonth) showDatePicker = false // 关闭日期选择器 } ) } // 时间选择器 if (showTimePicker) { TimePickerDialog( onDismissRequest = { showTimePicker = false }, // 点击外部时关闭时间选择器 onTimeSelected = { time -> // 更新选中的时间 selectedDateTime = selectedDateTime.withHour(time.hour).withMinute(time.minute) showTimePicker = false // 关闭时间选择器 } ) } } }