Scaffold

در «طراحی مواد»، داربست ساختاری بنیادی است که پلاتفرمی استانداردشده برای میاناهای کاربر پیچیده فراهم می‌کند. این مؤلفه بخش‌های مختلف میانای کاربر، مانند نوارهای برنامه و دکمه‌های کنش شناور را کنار هم نگه می‌دارد و به برنامه‌ها ظاهر و احساسی منسجم می‌دهد.

مثال

Scaffold ترکیب‌پذیر یک میانای برنامه‌سازی کاربردی ساده ارائه می‌دهد که می‌توانید از آن برای مونتاژ سریع ساختار برنامه‌تان طبق رهنمودهای Material Design استفاده کنید. ‫Scaffold چندین ترکیب‌پذیر را به‌عنوان پارامتر می‌پذیرد. ازجمله این موارد می‌توان به موارد زیر اشاره کرد:

  • topBar: نوار برنامه در بالای صفحه.
  • bottomBar: نوار برنامه در پایین صفحه‌نمایش.
  • floatingActionButton: دکمه‌ای که روی گوشه پایین سمت راست صفحه شناور است و می‌توانید از آن برای نمایش کنش‌های کلیدی استفاده کنید.

همچنین می‌توانید محتوای Scaffold را مانند سایر محفظه‌ها ارسال کنید. این تابع PaddingValues را به lambda content ارسال می‌کند که باید آن را به composable ریشه محتوایتان اعمال کنید تا اندازه آن را محدود کنید.

مثال زیر پیاده‌سازی کامل 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(),
            )
        }
    }
}

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

پیاده‌سازی داربستی که حاوی نوارهای برنامه ساده بالا و پایین و همچنین دکمه کنش شناوری است که شمارنده را تکرار می‌کند. محتوای داخلی داربست، نوشتار ساده‌ای است که مؤلفه را توضیح می‌دهد.
شکل ۱. پیاده‌سازی داربست.

منابع بیشتر