בוררי זמן מופיעים בדרך כלל בתיבות דו-שיח. אפשר להשתמש במודל כללי יחסית להטמיע אפשרות מינימלית של תיבת דו-שיח, או להטמיע תיבת דו-שיח בהתאמה אישית יותר גמישות.
לקבלת מידע נוסף על תיבות דו-שיח באופן כללי, כולל הוראות לשימוש בבורר השעה יש לעיין במדריך לבוררי זמנים.
דוגמה בסיסית
הדרך הישירה ביותר ליצור תיבת דו-שיח לבחירת בורר הזמן היא
ליצור תוכן קומפוזבילי שכולל את 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() } ) }
חשוב לשים לב לנקודות העיקריות בקטע הקוד:
- התוכן הקומפוזבילי
DialWithDialogExample
TimePicker
מופיע בתיבת דו-שיח. TimePickerDialog
הוא תוכן קומפוזבילי בהתאמה אישית שיוצרAlertDialog
עם את הפרמטרים הבאים:onDismiss
: פונקציה שנקראת כאשר המשתמש סוגר את תיבת הדו-שיח (דרך לחצן הסגירה או הניווט חזרה).onConfirm
: פונקציה שנקראת כאשר משתמש לוחץ על הלחצן OK (אישור) לחצן.content
: תוכן קומפוזבילי שמציג את בורר השעה בתיבת הדו-שיח.
AlertDialog
כולל את השדות האלה:- לחצן סגירה עם התווית 'סגירה'.
- לחצן אישור עם התווית 'אישור'.
- התוכן של בוחר הזמן שהועבר כפרמטר
text
.
- ה-
DialWithDialogExample
מאתחל אתTimePickerState
עם השעה הנוכחית ומעביר אותו גם לTimePicker
וגם לonConfirm
מותאמת אישית.
![חלונית לבחירת שעה ב-AlertDialog שכוללת כותרת, מתג להחלפת מצב ולחצני סגירה ואישור.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-basic.png?hl=he)
דוגמה מתקדמת
קטע הקוד הזה מדגים הטמעה מתקדמת של לוח זמנים בהתאמה אישית בתיבת דו-שיח של בוחר ב-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") } } } } } }
חשוב לשים לב לנקודות העיקריות בקטע הקוד:
- התוכן הקומפוזבילי
AdvancedTimePickerExample
יוצר זמן בהתאמה אישית בתיבת הדו-שיח של הבורר. - היא משתמשת בתוכן קומפוזבילי
Dialog
להשגת גמישות רבה יותר מ-AlertDialog
. - תיבת הדו-שיח כוללת כותרת שניתן להתאים אישית ולחצן להחלפת מצב בין מצבי החוגה והקלט.
Surface
מחילה צורה וגובה על תיבת הדו-שיח, וגםIntrinsicSize.Min
– גם לרוחב וגם לגובה.- הפריסה
Column
ו-Row
מספקות את רכיבי המבנה של תיבת הדו-שיח. - הדוגמה עוקבת אחרי מצב הבורר באמצעות
showDial
.IconButton
עובר בין המצבים והסמל מתעדכן בהתאם.- התוכן של תיבת הדו-שיח עובר בין
TimePicker
לביןTimeInput
בהתאם את המצבshowDial
.
תהליך ההטמעה המתקדם הזה מאפשר לכם להקדיש הרבה זמן להתאמה אישית ולשימוש חוזר תיבת דו-שיח של בורר שאפשר להתאים לתרחישים שונים לדוגמה באפליקציה שלכם.
היישום הזה נראה כך:
![חלונית לבחירת שעה בתיבת דו-שיח מותאמת אישית שכוללת כותרת, מתג להחלפת מצב ולחצני סגירה ואישור.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=he)