Scaffold

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

مثال

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

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

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

مراجع إضافية