Scaffold

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

مثال

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

تظهر طريقة التنفيذ هذه على النحو التالي:

الشكل 1. تنفيذ إطار عمل

مصادر إضافية

• أشرطة التطبيقات