في Material Design، السقالة هي هيكل أساسي يوفر منصة موحدة لواجهات المستخدم المعقدة. وهو يجمع أجزاءً مختلفة من واجهة المستخدم، مثل أشرطة التطبيقات وأزرار الإجراءات العائمة، ما يمنح التطبيقات شكلاً وطابعًا مترابطين.
مثال
توفّر واجهة برمجة التطبيقات Scaffold
القابلة للإنشاء واجهة برمجة تطبيقات بسيطة يمكنك استخدامها لتجميع بنية تطبيقك بسرعة وفقًا لإرشادات التصميم المتعدد الأبعاد.
تقبل الدالة 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(), ) } } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![يشير ذلك المصطلح إلى عملية تنفيذ سقالة تحتوي على أشرطة تطبيق بسيطة علوية وسفلية، بالإضافة إلى زر إجراء عائم يكرّر عدّادًا. المحتوى الداخلي للسقالة هو نص بسيط يشرح المكون.](https://developer.android.google.cn/static/develop/ui/compose/images/components/scaffold.png?authuser=4&hl=ar)