Scaffold

ב-Material Design, פיגום הוא מבנה בסיסי שמספק פלטפורמה סטנדרטית לממשקי משתמש מורכבים. הוא מחבר בין חלקים שונים של ממשק המשתמש, כמו סרגלי אפליקציות וכפתורי פעולה צפים, ומעניק לאפליקציות מראה ותחושה עקביים.

דוגמה

הפונקציה הקומפוזבילית Scaffold מספקת ממשק API פשוט שמאפשר לכם להרכיב במהירות את מבנה האפליקציה בהתאם להנחיות של Material Design. ‫Scaffold מקבל כמה תכנים קומפוזביליים כפרמטרים. למשל:

  • ‫topBar: סרגל האפליקציה בחלק העליון של המסך.
  • ‫bottomBar: סרגל האפליקציות בתחתית המסך.
  • ‫floatingActionButton: כפתור שמוצג בפינה הימנית התחתונה של המסך, שמאפשר לחשוף פעולות מרכזיות.

אפשר גם להעביר תוכן של Scaffold כמו שמעבירים למאגרים אחרים. הוא מעביר את PaddingValues ל-lambda של content שצריך להחיל על הפונקציה הקומפוזבילית ברמה הבסיסית (root) של התוכן כדי להגביל את הגודל שלה.

בדוגמה הבאה מוצגת הטמעה מלאה של Scaffold. הוא מכיל סרגל אפליקציה עליון, סרגל אפליקציה תחתון וכפתור פעולה צף (FAB).

@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(),
            )
        }
    }
}

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

הטמעה של פיגום שמכיל סרגלי אפליקציה פשוטים בחלק העליון והתחתון, וגם כפתור פעולה צף שחוזר על מונה. התוכן הפנימי של הפיגום הוא טקסט פשוט שמסביר את הרכיב.
איור 1. הטמעה של scaffold.

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