Scaffold
在 Material Design 中,基架是一种基本结构,可提供 用于复杂用户界面的标准化平台。它汇集了各种 部分,如应用栏和悬浮操作按钮,可让应用 保持一致的外观和风格。
示例
Scaffold
可组合项提供了一个简单易用的 API,可用于
根据 Material Design 准则快速组建应用的结构。
Scaffold
接受多个可组合项作为形参。其中包括
以下:
topBar
:横跨屏幕顶部的应用栏。bottomBar
:横跨屏幕底部的应用栏。floatingActionButton
:一个按钮悬停在 可用于显示关键操作的屏幕。
如需查看更详细的示例,了解如何同时植入顶部和底部区域 应用栏,请参阅应用栏页面。
您还可以将 Scaffold
内容传递给其他容器。它会通过
将 innerPadding
值添加到 content
lambda,然后便可在子元素中使用
可组合项。
以下示例提供了有关如何实现
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=7&hl=ro)