Scaffold
בעיצוב מהותי, פיסול הוא מבנה בסיסי שמספק פלטפורמה סטנדרטית לממשקי משתמש מורכבים. הוא מכיל חלקים מממשק המשתמש, כמו סרגלי אפליקציות ולחצני פעולה צפים, שמאפשרים לאפליקציות מראה וסגנון עקביים.
דוגמה
התוכן הקומפוזבילי 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(), ) } } }
היישום הזה נראה כך: