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(),
            )
        }
    }
}
Scaffold.kt

ההטמעה הזו נראית כך:

איור 1. הטמעה של פיגומים.

מקורות מידע נוספים

• סרגלי אפליקציות