android compose TimePickerDialog 时间选择对话框 使用

android compose TimePickerDialog 时间选择对话框 使用

请注意此代码段中的要点：

1. DialWithDialogExample 可组合项将 TimePicker 封装在对话框中。
2. TimePickerDialog 是一个自定义的可组合函数，用于创建具有以下参数的 AlertDialog：
   • onDismiss：当用户关闭对话框（通过关闭按钮或返回导航）时调用的函数。
   • onConfirm：用户点击"确定"按钮时调用的函数。
   • content：在对话框中显示时间选择器的可组合项。
3. AlertDialog 包含：
   • 一个标有"关闭"的关闭按钮。
   • 一个标有"确定"的确认按钮。
   • 作为 text 参数传递的时间选择器内容。
4. DialWithDialogExample 使用当前时间初始化 TimePickerState，并将其传递给 TimePicker 和 onConfirm 函数。

package com.wn.androidcomposedemo1.basegoogle

import android.app.TimePickerDialog
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerState
import androidx.compose.material3.rememberTimePickerState
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.Alignment
import androidx.compose.ui.Modifier
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme
import java.util.Calendar

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/28 21:28
 * Description : 时间选择框
 */
class TimeDialogActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    TimeDialogDemo()
                }
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun TimeDialogDemo(){
        var showDialog by remember { mutableStateOf(false) }

        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Button(onClick = {
                showDialog = true
            }) {
                Text("选择时间")
            }
        }

        if(showDialog){
            DialWithDialogExample(
                onConfirm = { timePickerState ->
                    val hour = timePickerState.hour
                    val minute = timePickerState.minute
                    Log.d("AAA" , "点击确定， 选择时间 , hour ：${hour}, minute : ${minute}")
                    showDialog = false
                },
                onDismiss =  {
                    Log.d("AAA" , "点击取消")
                    showDialog = false
                }
            )
        }

    }

    @ExperimentalMaterial3Api
    @Composable
    fun DialWithDialogExample(
        onConfirm : (TimePickerState) -> Unit,
        onDismiss : () -> Unit
    ){
        val currentTime = Calendar.getInstance()

        val timePickerState = rememberTimePickerState(
            initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
            initialMinute = currentTime.get(Calendar.MINUTE),
            is24Hour = true
        )


        TimePickerDialog2(
            onDismiss = {
                onDismiss()
            },
            onConfirm = {
                onConfirm(timePickerState)
            }
        ) {
            TimePicker(
                state = timePickerState
            )
        }
    }

    @ExperimentalMaterial3Api
    @Composable
    fun TimePickerDialog2(
        onDismiss: () -> Unit,
        onConfirm: () -> Unit,
        content : @Composable () -> Unit
    ){
        AlertDialog(
            onDismissRequest = onDismiss,
            dismissButton = {
                TextButton(
                    onClick = {
                        onDismiss()
                    }
                ) {
                    Text("取消")
                }
            },
            confirmButton = {
                TextButton(onClick = {
                    onConfirm()
                }) {
                    Text("确定")
                }
            },
            text = {
                content()
            }
        )
    }
}