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

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

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

مثال أساسي

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

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

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

مصادر إضافية

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