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

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

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

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