Scaffold

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

דוגמה

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

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

אפשר גם להעביר תוכן של Scaffold כמו שמעבירים תוכן לקונטיינרים אחרים. הוא מעביר את PaddingValues לפונקציית lambda‏ content שצריך להחיל על הרכיב הראשי של התוכן כדי להגביל את הגודל שלו.

בדוגמה הבאה מוצגת הטמעה מלאה של 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(),
            )
        }
    }
}

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

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

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