Scaffold

في Material Design، الهيكل الأساسي هو بنية أساسية توفّر منصّة مُعيارًا لواجهات المستخدم المعقدة. ويجمع هذا المظهر بين مختلف أجزاء واجهة المستخدم، مثل أشرطة التطبيقات والأزرار التفاعلية العائمة، ما يمنح التطبيقات مظهرًا وأسلوبًا متسقَين.

مثال

توفّر العناصر القابلة للتجميع Scaffold واجهة برمجة تطبيقات مباشرة يمكنك استخدامها ل تجميع بنية تطبيقك بسرعة وفقًا لإرشادات 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. تنفيذ إطار عمل

مراجع إضافية