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(), ) } } }
היישום הזה נראה כך: