Scaffold

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

مثال

توفّر واجهة برمجة التطبيقات Scaffold القابلة للإنشاء واجهة برمجة تطبيقات بسيطة يمكنك استخدامها تجميع بنية تطبيقك بسرعة وفقًا لإرشادات التصميم المتعدد الأبعاد. تقبل Scaffold العديد من العناصر القابلة للإنشاء كمَعلمات. ومن بينها التالي:

• topBar: شريط التطبيق في أعلى الشاشة
• bottomBar: شريط التطبيقات في أسفل الشاشة
• floatingActionButton: زر يمر فوق الجانب الأيسر السفلي من الشاشة التي يمكنك استخدامها لكشف الإجراءات الرئيسية.

للحصول على أمثلة أكثر تفصيلاً حول كيفية تنفيذ كلٍّ من أشرطة التطبيقات في أعلى الشاشة وفي أسفلها، يُرجى الاطّلاع على صفحة أشرطة التطبيقات.

يمكنك أيضًا تمرير محتوى Scaffold كما تفعل مع الحاويات الأخرى. يمرّ قيمة innerPadding إلى دالة lambda content التي يمكنك استخدامها بعد ذلك في ملف lambda التابع عناصر قابلة للإنشاء.

يقدم المثال التالي مثالاً كاملاً لكيفية تنفيذ 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. وضع سقالة.

مصادر إضافية

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