مربّعات حوار لأدوات اختيار الوقت

تظهر أدوات اختيار الوقت غالبًا في مربّعات الحوار. يمكنك استخدام تنفيذ عام وبسيط نسبيًا لمربّع حوار، أو يمكنك تنفيذ مربّع حوار مخصّص يتيح لك المزيد من المرونة.

لمزيد من المعلومات حول مربّعات الحوار بشكل عام، بما في ذلك كيفية استخدام حالة أداة اختيار الوقت، يُرجى الاطّلاع على دليل أدوات اختيار الوقت.

مثال أساسي

أسهل طريقة لإنشاء مربّع حوار لاختيار الوقت هي إنشاء دالة مركّبة تنفّذ 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() }
    )
}
TimePickers.kt

إليك النقاط الرئيسية في هذا المقتطف:

1. يغلّف العنصر القابل للإنشاء DialWithDialogExample العنصر TimePicker في مربّع حوار.
2. ‫TimePickerDialog هي دالة مركّبة مخصّصة تنشئ AlertDialog باستخدام المَعلمات التالية:
   • ‫onDismiss: دالة يتم استدعاؤها عندما يرفض المستخدم مربع الحوار (من خلال زر الرفض أو الرجوع إلى الصفحة السابقة).
   • ‫onConfirm: دالة يتم استدعاؤها عندما ينقر المستخدم على الزر "حسنًا".
   • ‫content: عنصر قابل للإنشاء يعرض أداة اختيار الوقت داخل مربّع الحوار.
3. يشمل AlertDialog ما يلي:
   • زر إغلاق يحمل التصنيف "إغلاق"
   • زر تأكيد يحمل التصنيف "حسنًا"
   • محتوى أداة اختيار الوقت الذي تم تمريره كمَعلمة text
4. تُهيئ DialWithDialogExample السمة TimePickerState باستخدام الوقت الحالي وتمرِّرها إلى كل من الدالتَين TimePicker وonConfirm.

الشكل 1. أداة اختيار الوقت في AlertDialog

مثال متقدّم

تعرض هذه المقتطفة عملية تنفيذ متقدّمة لمربّع حوار قابل للتخصيص لاختيار الوقت في 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") }
                }
            }
        }
    }
}
TimePickers.kt

إليك النقاط الرئيسية في هذا المقتطف:

1. تنشئ الدالة المركّبة AdvancedTimePickerExample مربّع حوار مخصّصًا لاختيار الوقت.
2. يستخدم هذا العنصر Dialog القابل للإنشاء لتوفير مرونة أكبر من AlertDialog.
3. يتضمّن مربّع الحوار عنوانًا قابلاً للتخصيص وزر تبديل للتبديل بين وضعَي الاتصال وإدخال الأرقام.
4. تطبّق Surface الشكل والارتفاع على مربّع الحوار، مع IntrinsicSize.Min لكل من العرض والارتفاع.
5. يوفر التنسيقان Column وRow مكوّنات بنية مربّع الحوار.
6. يتتبّع المثال وضع أداة الاختيار باستخدام showDial.
   • يتم التبديل بين الأوضاع باستخدام زر IconButton، ويتم تعديل الرمز وفقًا لذلك.
   • يتبدّل محتوى مربّع الحوار بين TimePicker وTimeInput استنادًا إلى حالة showDial.

يوفّر هذا التنفيذ المتقدّم مربّع حوار لاختيار الوقت يمكن تخصيصه وإعادة استخدامه بشكل كبير، كما يمكنه التكيّف مع حالات الاستخدام المختلفة في تطبيقك.

تظهر عملية التنفيذ هذه على النحو التالي:

الشكل 2. أداة اختيار الوقت في مربّع حوار مخصّص

مراجع إضافية

• دليل أدوات اختيار الوقت
• التصميم المتعدد الأبعاد - أدوات اختيار الوقت