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