با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
Scaffold
در طراحی متریال، داربست یک ساختار اساسی است که یک پلت فرم استاندارد شده برای رابط های کاربری پیچیده فراهم می کند. بخشهای مختلف رابط کاربری، مانند نوارهای برنامه و دکمههای عمل شناور را در کنار هم نگه میدارد و به برنامهها ظاهر و احساسی منسجم میدهد.
مثال
Scaffold composable یک API ساده ارائه می دهد که می توانید از آن برای جمع آوری سریع ساختار برنامه خود مطابق با دستورالعمل های طراحی متریال استفاده کنید. Scaffold چندین ترکیب پذیر را به عنوان پارامتر می پذیرد. از جمله موارد زیر است:
topBar : نوار برنامه در بالای صفحه.
bottomBar : نوار برنامه در پایین صفحه.
floatingActionButton : دکمهای که روی گوشه سمت راست پایین صفحه قرار میگیرد و میتوانید از آن برای نمایش اقدامات کلیدی استفاده کنید.
همچنین میتوانید محتوای Scaffold را همانطور که به ظروف دیگر منتقل میکنید ارسال کنید. PaddingValues به لامبدای content میفرستد که باید برای محدود کردن اندازه آن، روی root composable محتوای خود اعمال کنید.
مثال زیر اجرای کامل Scaffold را نشان می دهد. این شامل یک نوار برنامه بالا، یک نوار برنامه پایین و یک دکمه عمل شناور است.
@ComposablefunScaffoldExample(){varpressesbyremember{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(),)}}}
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-08-28 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-08-28 بهوقت ساعت هماهنگ جهانی."],[],[],null,["Scaffold\n\nIn Material Design, a scaffold is a fundamental structure that provides a\nstandardized platform for complex user interfaces. It holds together different\nparts of the UI, such as app bars and floating action buttons, giving apps a\ncoherent look and feel.\n\nExample\n\nThe [`Scaffold`](/reference/kotlin/androidx/compose/material3/package-summary#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable provides a straightforward API you can use to\nquickly assemble your app's structure according to Material Design guidelines.\n`Scaffold` accepts several composables as parameters. Among these are the\nfollowing:\n\n- `topBar`: The app bar across the top of the screen.\n- `bottomBar`: The app bar across the bottom of the screen.\n- `floatingActionButton`: A button that hovers over the bottom-right corner of the screen that you can use to expose key actions.\n\n| **Note:** For more detailed examples on how you can implement both top and bottom app bars, see the app bars page.\n\nYou can also pass `Scaffold` content as you would to other containers. It passes\n`PaddingValues` to the `content` lambda that you should apply to your\ncontent's root composable to constrain its size.\n\nThe following example shows a complete `Scaffold` implementation. It contains a\ntop app bar, a bottom app bar, and a floating action button.\n\n\n```kotlin\n@Composable\nfun ScaffoldExample() {\n var presses by remember { mutableIntStateOf(0) }\n\n Scaffold(\n topBar = {\n TopAppBar(\n colors = topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n title = {\n Text(\"Top app bar\")\n }\n )\n },\n bottomBar = {\n BottomAppBar(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n contentColor = MaterialTheme.colorScheme.primary,\n ) {\n Text(\n modifier = Modifier\n .fillMaxWidth(),\n textAlign = TextAlign.Center,\n text = \"Bottom app bar\",\n )\n }\n },\n floatingActionButton = {\n FloatingActionButton(onClick = { presses++ }) {\n Icon(Icons.Default.Add, contentDescription = \"Add\")\n }\n }\n ) { innerPadding -\u003e\n Column(\n modifier = Modifier\n .padding(innerPadding),\n verticalArrangement = Arrangement.spacedBy(16.dp),\n ) {\n Text(\n modifier = Modifier.padding(8.dp),\n text =\n \"\"\"\n 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.\n\n It also contains some basic inner content, such as this text.\n\n You have pressed the floating action button $presses times.\n \"\"\".trimIndent(),\n )\n }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Scaffold.kt#L47-L100\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as follows:\n**Figure 1.** An implementation of scaffold.\n\nAdditional resources\n\n- [App bars](/develop/ui/compose/components/app-bars)"]]