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