kotlin,Android,jetpack compose,日期时间设置

发布于:2025-04-15 ⋅ 阅读:(37) ⋅ 点赞:(0)

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 // 关闭时间选择器
                }
            )
        }
    }
}


网站公告

今日签到

点亮在社区的每一天
去签到