Scaffold
ב-Material Design, תומך הוא מבנה בסיסי שמספק פלטפורמה סטנדרטית לממשקי משתמש מורכבים. הוא מחבר בין חלקים שונים בממשק המשתמש, כמו שורת האפליקציות ולחצני הפעולה הצפים, ומעניק לאפליקציות מראה וסגנון עקביים.
דוגמה
הרכיב הניתן לקישור Scaffold מספק ממשק API פשוט שבעזרתו אפשר להרכיב במהירות את המבנה של האפליקציה בהתאם להנחיות של Material Design.
Scaffold מקבלת כמה רכיבים קומפוזביליים כפרמטרים. בין היתר:
topBar: שורת האפליקציות בחלק העליון של המסך.bottomBar: סרגל האפליקציות בחלק התחתון של המסך.floatingActionButton: לחצן שמרחף מעל הפינה השמאלית התחתונה של המסך, שבעזרתו אפשר לחשוף פעולות של מפתחות.
בדף 'סרחי אפליקציה' מפורטות דוגמאות מפורטות יותר להטמעה של סרחי אפליקציה בחלק העליון ובחלק התחתון של האפליקציה.
אפשר גם להעביר תוכן של Scaffold כמו שמעבירים תוכן לקונטיינרים אחרים. הוא מעביר ערך innerPadding ל-lambda של content, שבו אפשר להשתמש לאחר מכן ברכיבים נגזרים.
בדוגמה הבאה מופיעה דוגמה מלאה להטמעה של Scaffold. הוא מכיל סרגל אפליקציות עליון, סרגל אפליקציות תחתון ולחצן פעולה צף שמקיים אינטראקציה עם המצב הפנימי של Scaffold.
@Composable
fun ScaffoldExample() {
var presses by remember { 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(),
)
}
}
}
ההטמעה הזו נראית כך:
