Scaffold

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

مثال

Scaffold composable یک API ساده ارائه می دهد که می توانید از آن برای جمع آوری سریع ساختار برنامه خود مطابق با دستورالعمل های طراحی متریال استفاده کنید. Scaffold چندین ترکیب پذیر را به عنوان پارامتر می پذیرد. از جمله موارد زیر است:

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

برای مثال‌های دقیق‌تر در مورد نحوه اجرای هر دو نوار برنامه بالا و پایین، به صفحه نوار برنامه مراجعه کنید.

همچنین می‌توانید محتوای Scaffold همانطور که به ظروف دیگر منتقل می‌کنید ارسال کنید. یک مقدار innerPadding به content lambda ارسال می‌کند که می‌توانید از آن در composable‌های فرزند استفاده کنید.

مثال زیر یک مثال کامل از نحوه پیاده سازی 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. اجرای داربست.

منابع اضافی