انتخابگرهای زمان اغلب در دیالوگ ها ظاهر می شوند. می توانید از اجرای نسبتاً عمومی و حداقلی یک گفتگو استفاده کنید یا می توانید یک گفتگوی سفارشی را با انعطاف بیشتری پیاده سازی کنید.
برای اطلاعات بیشتر در مورد دیالوگ ها به طور کلی، از جمله نحوه استفاده از حالت انتخابگر زمان، به راهنمای انتخابگر زمان مراجعه کنید.
مثال اساسی
ساده ترین راه برای ایجاد دیالوگ برای انتخابگر زمان شما این است که یک Composable ایجاد کنید که 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: تابعی که وقتی کاربر روی دکمه "OK" کلیک می کند، فراخوانی می شود. -
content: قابل ترکیبی که انتخابگر زمان را در کادر گفتگو نمایش می دهد.
-
-
AlertDialogشامل:- یک دکمه رد کردن با برچسب "رد کردن".
- یک دکمه تأیید با عنوان "OK".
- محتوای انتخابگر زمان به عنوان پارامتر
textارسال شد.
-
DialWithDialogExampleTimePickerStateرا با زمان فعلی مقداردهی می کند و آن را به تابع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") } } } } } }
به نکات کلیدی در این قطعه توجه کنید:
- Composable
AdvancedTimePickerExampleیک گفتگوی انتخابگر زمان قابل تنظیم ایجاد می کند. - برای انعطاف بیشتر از
AlertDialogاز یکDialogقابل تنظیم استفاده می کند. - این گفتگو شامل یک عنوان قابل تنظیم و یک دکمه جابجایی برای جابجایی بین حالت شماره گیری و ورودی است.
-
Surfaceشکل و ارتفاع را به گفتگو اعمال می کند، باIntrinsicSize.Minهم برای عرض و هم برای ارتفاع. - طرح بندی
ColumnوRowاجزای ساختار گفتگو را فراهم می کند. - مثال حالت انتخابگر را با استفاده از
showDialردیابی می کند.- یک
IconButtonبین حالتها جابهجا میشود و نماد را متناسب با آن بهروزرسانی میکند. - محتوای گفتگو بین
TimePickerوTimeInputبر اساس حالتshowDialجابجا می شود.
- یک
این پیاده سازی پیشرفته یک گفتگوی انتخابگر زمان بسیار قابل تنظیم و قابل استفاده مجدد را ارائه می دهد که می تواند با موارد استفاده مختلف در برنامه شما سازگار شود.
این پیاده سازی به صورت زیر ظاهر می شود:
