קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
Scaffold
ב-Material Design, פיגום הוא מבנה בסיסי שמספק פלטפורמה סטנדרטית לממשקי משתמש מורכבים. הוא מחבר בין חלקים שונים בממשק המשתמש, כמו סרגלי אפליקציות ולחצני פעולה צפים, ומעניק לאפליקציות מראה ותחושה עקביים.
דוגמה
רכיב ה-Scaffold שאפשר להרכיב ממנו רכיבים אחרים מספק API פשוט שבעזרתו אפשר להרכיב במהירות את המבנה של האפליקציה בהתאם להנחיות של Material Design.
Scaffold מקבלת כמה קומפוזבילים כפרמטרים. לדוגמה:
topBar: סרגל האפליקציות בחלק העליון של המסך.
bottomBar: סרגל האפליקציות בחלק התחתון של המסך.
floatingActionButton: לחצן שמופיע בפינה השמאלית התחתונה של המסך, שאפשר להשתמש בו כדי להציג פעולות מרכזיות.
אפשר גם להעביר תוכן Scaffold כמו שמעבירים אותו למאגרי תגים אחרים. היא מעבירה את PaddingValues ל-lambda content שצריך להחיל על רכיב ה-composable הבסיסי של התוכן כדי להגביל את הגודל שלו.
בדוגמה הבאה מוצגת הטמעה מלאה של Scaffold. הוא כולל סרגל אפליקציה עליון, סרגל אפליקציה תחתון ולחצן פעולה צף.
@ComposablefunScaffoldExample(){varpressesbyremember{mutableIntStateOf(0)}Scaffold(topBar={TopAppBar(colors=topAppBarColors(containerColor=MaterialTheme.colorScheme.primaryContainer,titleContentColor=MaterialTheme.colorScheme.primary,),title={Text("Top app bar")})},bottomBar={BottomAppBar(containerColor=MaterialTheme.colorScheme.primaryContainer,contentColor=MaterialTheme.colorScheme.primary,){Text(modifier=Modifier.fillMaxWidth(),textAlign=TextAlign.Center,text="Bottom app bar",)}},floatingActionButton={FloatingActionButton(onClick={presses++}){Icon(Icons.Default.Add,contentDescription="Add")}}){innerPadding->
Column(modifier=Modifier.padding(innerPadding),verticalArrangement=Arrangement.spacedBy(16.dp),){Text(modifier=Modifier.padding(8.dp),text=""" This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button. It also contains some basic inner content, such as this text. You have pressed the floating action button $presses times. """.trimIndent(),)}}}
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. 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,["Scaffold\n\nIn Material Design, a scaffold is a fundamental structure that provides a\nstandardized platform for complex user interfaces. It holds together different\nparts of the UI, such as app bars and floating action buttons, giving apps a\ncoherent look and feel.\n\nExample\n\nThe [`Scaffold`](/reference/kotlin/androidx/compose/material3/package-summary#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable provides a straightforward API you can use to\nquickly assemble your app's structure according to Material Design guidelines.\n`Scaffold` accepts several composables as parameters. Among these are the\nfollowing:\n\n- `topBar`: The app bar across the top of the screen.\n- `bottomBar`: The app bar across the bottom of the screen.\n- `floatingActionButton`: A button that hovers over the bottom-right corner of the screen that you can use to expose key actions.\n\n| **Note:** For more detailed examples on how you can implement both top and bottom app bars, see the app bars page.\n\nYou can also pass `Scaffold` content as you would to other containers. It passes\n`PaddingValues` to the `content` lambda that you should apply to your\ncontent's root composable to constrain its size.\n\nThe following example shows a complete `Scaffold` implementation. It contains a\ntop app bar, a bottom app bar, and a floating action button.\n\n\n```kotlin\n@Composable\nfun ScaffoldExample() {\n var presses by remember { mutableIntStateOf(0) }\n\n Scaffold(\n topBar = {\n TopAppBar(\n colors = topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n title = {\n Text(\"Top app bar\")\n }\n )\n },\n bottomBar = {\n BottomAppBar(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n contentColor = MaterialTheme.colorScheme.primary,\n ) {\n Text(\n modifier = Modifier\n .fillMaxWidth(),\n textAlign = TextAlign.Center,\n text = \"Bottom app bar\",\n )\n }\n },\n floatingActionButton = {\n FloatingActionButton(onClick = { presses++ }) {\n Icon(Icons.Default.Add, contentDescription = \"Add\")\n }\n }\n ) { innerPadding -\u003e\n Column(\n modifier = Modifier\n .padding(innerPadding),\n verticalArrangement = Arrangement.spacedBy(16.dp),\n ) {\n Text(\n modifier = Modifier.padding(8.dp),\n text =\n \"\"\"\n This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.\n\n It also contains some basic inner content, such as this text.\n\n You have pressed the floating action button $presses times.\n \"\"\".trimIndent(),\n )\n }\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Scaffold.kt#L47-L100\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as follows:\n**Figure 1.** An implementation of scaffold.\n\nAdditional resources\n\n- [App bars](/develop/ui/compose/components/app-bars)"]]