תיבות דו-שיח לבוררי שעות

כלי לבחירת שעה מופיעים בדרך כלל בתיבות דו-שיח. אפשר להשתמש בהטמעה כללית ומינימלית יחסית של תיבת דו-שיח, או להטמיע תיבת דו-שיח בהתאמה אישית עם יותר גמישות.

מידע נוסף על תיבות דו-שיח באופן כללי, כולל איך להשתמש במצב של כלי לבחירת שעה, זמין במדריך לכלי לבחירת שעה.

דוגמה בסיסית

הדרך הכי פשוטה ליצור תיבת דו-שיח לבחירת שעה היא ליצור קומפוזיציה שמטמיעה את 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 composable wraps TimePicker בתיבת דו-שיח.
  2. TimePickerDialog הוא קומפוזיציה מותאמת אישית שיוצרת AlertDialog עם הפרמטרים הבאים:
    • onDismiss: פונקציה שמופעלת כשהמשתמש סוגר את תיבת הדו-שיח (באמצעות לחצן הסגירה או החזרה).
    • onConfirm: פונקציה שמופעלת כשהמשתמש לוחץ על הלחצן 'אישור'.
    • content: קומפוזיציה שמציגה את בורר השעה בתוך תיבת הדו-שיח.
  3. AlertDialog כולל את:
    • לחצן סגירה עם התווית 'סגירה'.
    • לחצן אישור עם הכיתוב 'אישור'.
    • התוכן של הכלי לבחירת שעות שמועבר כפרמטר text.
  4. הפונקציה DialWithDialogExample מאתחלת את TimePickerState עם השעה הנוכחית ומעבירה אותה גם לפונקציה TimePicker וגם לפונקציה onConfirm.
בורר שעות ב-AlertDialog שמטמיע כותרת, מתג מצב ולחצני סגירה ואישור.
איור 1. בוחר זמן ב-AlertDialog.

דוגמה מתקדמת

בקטע הקוד הזה מוצגת הטמעה מתקדמת של תיבת דו-שיח של בחירת זמן שניתנת להתאמה אישית ב-Jetpack פיתוח נייטיב.

@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. כלי לבחירת שעה בתיבת דו-שיח בהתאמה אישית.

מקורות מידע נוספים