Orbiter הוא רכיב מרחבי שאפשר לצרף לחלונית מרחבית או לרכיב פריסה מרחבית תואמים, כמו SpatialColumn, SpatialRow או SpatialBox. בדרך כלל,
הוא מכיל פריטים של ניווט ופעולות לפי הקשר שקשורים לישות
שאליה הוא מעוגן. לדוגמה, אם יצרתם חלונית מרחבית להצגת קטע וידאו, אתם יכולים להוסיף רכיבי UI להפעלה של סרטונים בתוך חלונית צפה.
יצירת גשושית
כמו שמוצג בדוגמה הבאה, קוראים ל-orbiter בתוך פריסת הדו-ממד ב-SpatialPanel כדי לעטוף את פקדי המשתמש כמו ניווט. הפעולה הזו מחלצת אותם מהפריסה הדו-ממדית ומצרפת אותם לחלונית המרחבית בהתאם להגדרות שלכם.
Subspace { SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) .resizable() .movable(), ) { SpatialPanelContent() OrbiterExample() } }
@Composable fun OrbiterExample() { Orbiter( position = OrbiterPosition.BottomCenter( verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside, offset = DpVolumeOffset(y = 96.dp) ), ) { Surface(Modifier.clip(CircleShape)) { Row( Modifier .background(color = Color.Black) .height(100.dp) .width(600.dp), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { Text( text = "Orbiter", color = Color.White, fontSize = 50.sp ) } } } }
מידע חשוב על הקוד
- מכיוון שרכיבי Orbiter הם רכיבי ממשק משתמש מרחביים, אפשר להשתמש בקוד שלהם גם בפריסות דו-ממדיות או תלת-ממדיות. בפריסה דו-ממדית, האפליקציה מעבדת רק את התוכן שבתוך ה-orbiter ומתעלמת מה-orbiter עצמו.
- בהנחיות העיצוב שלנו מוסבר איך להשתמש ב-Orbiter ולעצב אותו.
הצמדת תפריטים צפים לפריסות וללוחות מרחביים
אפשר לעגן רכיב Orbiter ל-SpatialPanel ולרכיבי פריסה מרחבית שהוגדרו ב-Compose. כדי לעשות את זה, צריך להצהיר על orbiter בפריסה מרחבית של רכיבים בממשק המשתמש, כמו SpatialRow, SpatialColumn או SpatialBox. ה-orbiter מעוגן לרכיב ההורה הקרוב ביותר למקום שבו הצהרתם עליו.
ההתנהגות של ה-orbiter נקבעת לפי המקום שבו מצהירים עליו:
- בפריסה דו-ממדית שמוכלת ב-
SpatialPanel(כמו שמוצג בקטע הקוד הקודם), ה-orbiter מעוגן לאותוSpatialPanel. - ב-
Subspace, ה-orbiter מעוגן לישות האם הקרובה ביותר, שהיא הפריסה המרחבית שבה ה-orbiter מוצהר.
בדוגמה הבאה אפשר לראות איך לעגן רכיב צף לשורה מרחבית:
Subspace { SpatialRow { Orbiter( position = OrbiterPosition.TopCenter( verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside, offset = DpVolumeOffset(y = 8.dp) ), shape = SpatialRoundedCornerShape(size = CornerSize(50)) ) { Text( "Hello World!", style = MaterialTheme.typography.titleMedium, modifier = Modifier .background(Color.White) .padding(16.dp) ) } SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) ) { Box( modifier = Modifier .background(Color.Red) ) } SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) ) { Box( modifier = Modifier .background(Color.Blue) ) } } }
מידע חשוב על הקוד
- כשמצהירים על orbiter מחוץ לפריסה דו-ממדית, ה-orbiter מעוגן לישות האם הקרובה ביותר. במקרה כזה, ה-orbiter מעוגן לחלק העליון של ה-
SpatialRowשבו הוא מוצהר. - לפריסות מרחביות כמו
SpatialRow,SpatialColumnו-SpatialBoxיש ישויות ללא תוכן שמשויכות אליהן. לכן, חלון צף שמוצהר בפריסה מרחבית מעוגן לפריסה הזו.