تظهر أداة اختيار الوقت غالبًا في مربّعات الحوار. يمكنك استخدام لغة عامة نسبيًا بأقلّ قدر ممكن من التنفيذ لمربّع حوار، أو يمكنك تنفيذ مربّع حوار مخصّص المزيد من المرونة.
لمزيد من المعلومات حول مربّعات الحوار بشكل عام، بما في ذلك طريقة استخدام "أداة اختيار الوقت" راجِع دليل أدوات اختيار الوقت.
مثال أساسي
إنّ الطريقة الأكثر وضوحًا لإنشاء مربّع حوار لأداة اختيار الوقت هي
إنشاء عنصر قابل للتجميع ينفذ 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
مربّع حوار قابل للتخصيص لاختيار الوقت. - ويستخدم
Dialog
قابلاً للتركيب لتوفير مرونة أكبر منAlertDialog
. - يتضمن مربّع الحوار عنوانًا قابلاً للتخصيص وزر تبديل للتبديل بين أوضاع الاتصال والإدخال.
- تطبِّق
Surface
الشكل والارتفاع على مربّع الحوار، مع استخدامIntrinsicSize.Min
لكل من العرض والارتفاع. - يقدّم تنسيقا
Column
وRow
مكوّنات بنية مربّع الحوار. - يتتبّع المثال وضع أداة الاختيار باستخدام
showDial
.- يمكن أن يبدِّل
IconButton
بين الوضعَين، مع تعديل الرمز وفقًا لذلك. - يتم تبديل محتوى مربّع الحوار بين
TimePicker
وTimeInput
استنادًا إلى حالةshowDial
.
- يمكن أن يبدِّل
يقدّم هذا التنفيذ المتقدّم مربّع حوار لاختيار الوقت قابلاً للتخصيص بشكل كبير وقابلًا لإعادة الاستخدام ويمكنه التكيّف مع حالات الاستخدام المختلفة في تطبيقك.
تظهر عملية التنفيذ هذه على النحو التالي:
