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

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

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

مثال أساسي

إنّ الطريقة الأكثر وضوحًا لإنشاء مربّع حوار لأداة اختيار الوقت هي إنشاء عنصر قابل للتجميع ينفذ 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.

مثال متقدّم

يوضِّح هذا المقتطف تنفيذًا متقدّمًا لمربّع حوار قابل للتخصيص لاختيار الوقت في 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.

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

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

مصادر إضافية

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