קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
כלי לבחירת שעה מופיעים בדרך כלל בתיבות דו-שיח. אפשר להשתמש בהטמעה כללית ומינימלית יחסית של תיבת דו-שיח, או להטמיע תיבת דו-שיח בהתאמה אישית עם יותר גמישות.
מידע נוסף על תיבות דו-שיח באופן כללי, כולל איך להשתמש במצב של כלי לבחירת שעה, זמין במדריך לכלי לבחירת שעה.
דוגמה בסיסית
הדרך הכי פשוטה ליצור תיבת דו-שיח לבחירת שעה היא ליצור קומפוזיציה שמטמיעה את AlertDialog. קטע הקוד הבא מספק דוגמה לתיבת דו-שיח מינימלית יחסית שנוצרת באמצעות הגישה הזו:
רכיב ה-Composable DialWithDialogExample TimePicker מוצג בתיבת דו-שיח.
TimePickerDialog הוא קומפוזיציה מותאמת אישית שיוצרת AlertDialog עם הפרמטרים הבאים:
onDismiss: פונקציה שמופעלת כשהמשתמש סוגר את תיבת הדו-שיח (באמצעות לחצן הסגירה או החזרה).
onConfirm: פונקציה שמופעלת כשהמשתמש לוחץ על הלחצן 'אישור'.
content: קומפוזיציה שמציגה את בורר השעה בתוך תיבת הדו-שיח.
AlertDialog כולל את:
לחצן סגירה עם התווית 'סגירה'.
לחצן אישור עם הכיתוב 'אישור'.
התוכן של הכלי לבחירת שעות שמועבר כפרמטר text.
הפונקציה DialWithDialogExample מאתחלת את TimePickerState עם השעה הנוכחית ומעבירה אותה גם לפונקציה TimePicker וגם לפונקציה onConfirm.
איור 1. בוחר זמן ב-AlertDialog.
דוגמה מתקדמת
בקטע הקוד הזה מוצגת הטמעה מתקדמת של תיבת דו-שיח של בחירת זמן שניתנת להתאמה אישית ב-Jetpack פיתוח נייטיב.
@ComposablefunAdvancedTimePickerExample(onConfirm:(TimePickerState)->Unit,onDismiss:()->Unit,){valcurrentTime=Calendar.getInstance()valtimePickerState=rememberTimePickerState(initialHour=currentTime.get(Calendar.HOUR_OF_DAY),initialMinute=currentTime.get(Calendar.MINUTE),is24Hour=true,)/** Determines whether the time picker is dial or input */varshowDialbyremember{mutableStateOf(true)}/** The icon used for the icon button that switches from dial to input */valtoggleIcon=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,)}}}@ComposablefunAdvancedTimePickerDialog(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")}}}}}}
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-08-27 (שעון UTC)."],[],[],null,["[Time pickers](/develop/ui/compose/components/time-pickers) often appear in dialogs. You can use a relatively generic and\nminimal implementation of a dialog, or you can implement a custom dialog with\nmore flexibility.\n\nFor more information on dialogs in general, including how to use the time picker\nstate, see the [Time pickers guide](/develop/ui/compose/components/time-pickers).\n\nBasic example\n\nThe most straightforward way to create a dialog for your time picker is to\ncreate a composable that implements [`AlertDialog`](/reference/kotlin/androidx/compose/material3/package-summary#AlertDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.DialogProperties)). The following snippet\nprovides an example of a relatively minimal dialog using this approach:\n\n\n```kotlin\n@Composable\nfun DialWithDialogExample(\n onConfirm: (TimePickerState) -\u003e Unit,\n onDismiss: () -\u003e Unit,\n) {\n val currentTime = Calendar.getInstance()\n\n val timePickerState = rememberTimePickerState(\n initialHour = currentTime.get(Calendar.HOUR_OF_DAY),\n initialMinute = currentTime.get(Calendar.MINUTE),\n is24Hour = true,\n )\n\n TimePickerDialog(\n onDismiss = { onDismiss() },\n onConfirm = { onConfirm(timePickerState) }\n ) {\n TimePicker(\n state = timePickerState,\n )\n }\n}\n\n@Composable\nfun TimePickerDialog(\n onDismiss: () -\u003e Unit,\n onConfirm: () -\u003e Unit,\n content: @Composable () -\u003e Unit\n) {\n AlertDialog(\n onDismissRequest = onDismiss,\n dismissButton = {\n TextButton(onClick = { onDismiss() }) {\n Text(\"Dismiss\")\n }\n },\n confirmButton = {\n TextButton(onClick = { onConfirm() }) {\n Text(\"OK\")\n }\n },\n text = { content() }\n )\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt#L294-L337\n```\n\n\u003cbr /\u003e\n\nNote the key points in this snippet:\n\n1. The `DialWithDialogExample` composable wraps [`TimePicker`](/develop/ui/compose/components/time-pickers) in a dialog.\n2. `TimePickerDialog` is a custom composable that creates an `AlertDialog` with the following parameters:\n - `onDismiss`: A function called when the user dismisses the dialog (via the dismiss button or navigation back).\n - `onConfirm`: A function called when the user clicks the \"OK\" button.\n - `content`: A composable that displays the time picker within the dialog.\n3. The `AlertDialog` includes:\n - A dismiss button labeled \"Dismiss\".\n - A confirm button labeled \"OK\".\n - The time picker content passed as the `text` parameter.\n4. The `DialWithDialogExample` initializes the `TimePickerState` with the current time and passes it to both the `TimePicker` and the `onConfirm` function.\n\n**Figure 1.** A time picker in an AlertDialog.\n\nAdvanced example\n\nThis snippet demonstrates an advanced implementation of a customizable time\npicker dialog in Jetpack Compose.\n\n\n```kotlin\n@Composable\nfun AdvancedTimePickerExample(\n onConfirm: (TimePickerState) -\u003e Unit,\n onDismiss: () -\u003e Unit,\n) {\n\n val currentTime = Calendar.getInstance()\n\n val timePickerState = rememberTimePickerState(\n initialHour = currentTime.get(Calendar.HOUR_OF_DAY),\n initialMinute = currentTime.get(Calendar.MINUTE),\n is24Hour = true,\n )\n\n /** Determines whether the time picker is dial or input */\n var showDial by remember { mutableStateOf(true) }\n\n /** The icon used for the icon button that switches from dial to input */\n val toggleIcon = if (showDial) {\n Icons.Filled.EditCalendar\n } else {\n Icons.Filled.AccessTime\n }\n\n AdvancedTimePickerDialog(\n onDismiss = { onDismiss() },\n onConfirm = { onConfirm(timePickerState) },\n toggle = {\n IconButton(onClick = { showDial = !showDial }) {\n Icon(\n imageVector = toggleIcon,\n contentDescription = \"Time picker type toggle\",\n )\n }\n },\n ) {\n if (showDial) {\n TimePicker(\n state = timePickerState,\n )\n } else {\n TimeInput(\n state = timePickerState,\n )\n }\n }\n}\n\n@Composable\nfun AdvancedTimePickerDialog(\n title: String = \"Select Time\",\n onDismiss: () -\u003e Unit,\n onConfirm: () -\u003e Unit,\n toggle: @Composable () -\u003e Unit = {},\n content: @Composable () -\u003e Unit,\n) {\n Dialog(\n onDismissRequest = onDismiss,\n properties = DialogProperties(usePlatformDefaultWidth = false),\n ) {\n Surface(\n shape = MaterialTheme.shapes.extraLarge,\n tonalElevation = 6.dp,\n modifier =\n Modifier\n .width(IntrinsicSize.Min)\n .height(IntrinsicSize.Min)\n .background(\n shape = MaterialTheme.shapes.extraLarge,\n color = MaterialTheme.colorScheme.surface\n ),\n ) {\n Column(\n modifier = Modifier.padding(24.dp),\n horizontalAlignment = Alignment.CenterHorizontally\n ) {\n Text(\n modifier = Modifier\n .fillMaxWidth()\n .padding(bottom = 20.dp),\n text = title,\n style = MaterialTheme.typography.labelMedium\n )\n content()\n Row(\n modifier = Modifier\n .height(40.dp)\n .fillMaxWidth()\n ) {\n toggle()\n Spacer(modifier = Modifier.weight(1f))\n TextButton(onClick = onDismiss) { Text(\"Cancel\") }\n TextButton(onClick = onConfirm) { Text(\"OK\") }\n }\n }\n }\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/TimePickers.kt#L342-L439\n```\n\n\u003cbr /\u003e\n\nNote the key points in this snippet:\n\n1. The `AdvancedTimePickerExample` composable creates a customizable time picker dialog.\n2. It uses a [`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) composable for more flexibility than `AlertDialog`.\n3. The dialog includes a customizable title and a toggle button to switch between dial and input modes.\n4. `Surface` applies shape and elevation to the dialog, with `IntrinsicSize.Min` for both width and height.\n5. `Column` and `Row` layout provide the dialog's structure components.\n6. The example tracks the picker mode using `showDial`.\n - An `IconButton` toggles between modes, updating the icon accordingly.\n - The dialog content switches between `TimePicker` and `TimeInput` based on the `showDial` state.\n\nThis advanced implementation provides a highly customizable and reusable time\npicker dialog that can adapt to different use cases in your app.\n\nThis implementation appears as follows:\n**Figure 2.** A time picker in a custom dialog.\n\nAdditional resources\n\n- [Time pickers guide](/develop/ui/compose/components/time-pickers)\n- [Material Design - Time Pickers](https://m3.material.io/components/time-pickers/overview)"]]