Scaffold

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

مثال

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

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

همچنین می‌توانید محتوای Scaffold را همان‌طور که به دیگر محتوی‌ها منتقل می‌کنید، منتقل کنید. این مقدار PaddingValues را به لامبدای 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(),
            )
        }
    }
}

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

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

منابع بیشتر