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

היישום הזה נראה כך:

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

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