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

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

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

مثال أساسي

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

يُرجى ملاحظة النقاط الرئيسية في هذا المقتطف:

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

مثال متقدم

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

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

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

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

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

منتقي الوقت في مربّع حوار مخصّص يتضمّن عنوانًا ومفتاح تبديل للوضع وأزرار الإغلاق والتأكيد.
الشكل 2. أداة اختيار الوقت في مربّع حوار مخصّص

مصادر إضافية