टाइम पिकर अक्सर डायलॉग में दिखते हैं. आपके पास डायलॉग के लिए, सामान्य और कम से कम लागू करने का विकल्प है. इसके अलावा, ज़्यादा सुविधाओं के साथ कस्टम डायलॉग लागू किया जा सकता है.
डायलॉग बॉक्स के बारे में ज़्यादा जानकारी के लिए, टाइम पिकर की गाइड देखें. इसमें, टाइम पिकर की स्थिति का इस्तेमाल करने का तरीका भी बताया गया है.
बुनियादी उदाहरण
टाइम पिकर के लिए डायलॉग बनाने का सबसे आसान तरीका यह है कि आप AlertDialog
को लागू करने वाला कॉम्पोज़ेबल बनाएं. नीचे दिया गया स्निपेट, इस तरीके का इस्तेमाल करके कम से कम डायलॉग के उदाहरण के बारे में बताता है:
@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, ) TimePickerDialog( onDismiss = { onDismiss() }, onConfirm = { onConfirm(timePickerState) } ) { TimePicker( state = timePickerState, ) } } @Composable fun TimePickerDialog( onDismiss: () -> Unit, onConfirm: () -> Unit, content: @Composable () -> Unit ) { AlertDialog( onDismissRequest = onDismiss, dismissButton = { TextButton(onClick = { onDismiss() }) { Text("Dismiss") } }, confirmButton = { TextButton(onClick = { onConfirm() }) { Text("OK") } }, text = { content() } ) }
इस स्निपेट में दी गई मुख्य बातों पर ध्यान दें:
DialWithDialogExample
, डायलॉग मेंTimePicker
को कंपोज करने के लिए इस्तेमाल किया जाता है.TimePickerDialog
एक कस्टम कॉम्पोज़ेबल है, जो इन पैरामीटर के साथAlertDialog
बनाता है:onDismiss
: यह फ़ंक्शन तब कॉल किया जाता है, जब उपयोगकर्ता डायलॉग को खारिज करता है. ऐसा, 'खारिज करें' बटन या नेविगेशन के 'वापस जाएं' बटन का इस्तेमाल करके किया जाता है.onConfirm
: यह फ़ंक्शन तब कॉल किया जाता है, जब उपयोगकर्ता "ठीक है" बटन पर क्लिक करता है.content
: ऐसा कॉम्पोज़ेबल जो डायलॉग में टाइम पिकर दिखाता है.
AlertDialog
में ये शामिल हैं:- "खारिज करें" लेबल वाला, खारिज करने का बटन.
- "ठीक है" लेबल वाला, पुष्टि करने वाला बटन.
text
पैरामीटर के तौर पर पास किया गया टाइम पिकर कॉन्टेंट.
DialWithDialogExample
,TimePickerState
को मौजूदा समय के साथ शुरू करता है और उसेTimePicker
औरonConfirm
फ़ंक्शन, दोनों को पास करता है.
बेहतर उदाहरण
इस स्निपेट में, Jetpack Compose में पसंद के मुताबिक टाइम पिकर डायलॉग को बेहतर तरीके से लागू करने का तरीका बताया गया है.
@Composable fun AdvancedTimePickerExample( 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, ) /** Determines whether the time picker is dial or input */ var showDial by remember { mutableStateOf(true) } /** The icon used for the icon button that switches from dial to input */ val toggleIcon = if (showDial) { Icons.Filled.EditCalendar } else { Icons.Filled.AccessTime } AdvancedTimePickerDialog( onDismiss = { onDismiss() }, onConfirm = { onConfirm(timePickerState) }, toggle = { IconButton(onClick = { showDial = !showDial }) { Icon( imageVector = toggleIcon, contentDescription = "Time picker type toggle", ) } }, ) { if (showDial) { TimePicker( state = timePickerState, ) } else { TimeInput( state = timePickerState, ) } } } @Composable fun AdvancedTimePickerDialog( title: String = "Select Time", onDismiss: () -> Unit, onConfirm: () -> Unit, toggle: @Composable () -> Unit = {}, content: @Composable () -> Unit, ) { Dialog( onDismissRequest = onDismiss, properties = DialogProperties(usePlatformDefaultWidth = false), ) { Surface( shape = MaterialTheme.shapes.extraLarge, tonalElevation = 6.dp, modifier = Modifier .width(IntrinsicSize.Min) .height(IntrinsicSize.Min) .background( shape = MaterialTheme.shapes.extraLarge, color = MaterialTheme.colorScheme.surface ), ) { Column( modifier = Modifier.padding(24.dp), horizontalAlignment = Alignment.CenterHorizontally ) { Text( modifier = Modifier .fillMaxWidth() .padding(bottom = 20.dp), text = title, style = MaterialTheme.typography.labelMedium ) content() Row( modifier = Modifier .height(40.dp) .fillMaxWidth() ) { toggle() Spacer(modifier = Modifier.weight(1f)) TextButton(onClick = onDismiss) { Text("Cancel") } TextButton(onClick = onConfirm) { Text("OK") } } } } } }
इस स्निपेट में दी गई मुख्य बातों पर ध्यान दें:
AdvancedTimePickerExample
कॉम्पोज़ेबल, पसंद के मुताबिक टाइम पिकर डायलॉग बनाता है.- यह
AlertDialog
की तुलना में ज़्यादा सुविधाओं के लिए,Dialog
कॉम्पोज़ेबल का इस्तेमाल करता है. - डायलॉग में, पसंद के मुताबिक बनाया जा सकने वाला टाइटल और डायल और इनपुट मोड के बीच स्विच करने के लिए टॉगल बटन शामिल होता है.
Surface
, डायलॉग बॉक्स में आकार और ऊंचाई लागू करता है. इसके लिए, चौड़ाई और ऊंचाई, दोनों के लिएIntrinsicSize.Min
का इस्तेमाल किया जाता है.Column
औरRow
लेआउट, डायलॉग के स्ट्रक्चर कॉम्पोनेंट उपलब्ध कराते हैं.- इस उदाहरण में,
showDial
का इस्तेमाल करके पिकर मोड को ट्रैक किया गया है.IconButton
, मोड के बीच टॉगल करता है और आइकॉन को उसके हिसाब से अपडेट करता है.- डायलॉग बॉक्स का कॉन्टेंट,
showDial
की स्थिति के आधार परTimePicker
औरTimeInput
के बीच स्विच करता है.
इस बेहतर तरीके से लागू करने पर, टाइम पिकर डायलॉग को ज़रूरत के मुताबिक बनाया जा सकता है और उसे फिर से इस्तेमाल किया जा सकता है. यह डायलॉग, आपके ऐप्लिकेशन में इस्तेमाल के अलग-अलग उदाहरणों के हिसाब से बदल सकता है.
लागू होने पर यह ऐसा दिखता है: