Scaffold

在 Material Design 中，脚手架是一种基础结构，它为复杂的用户界面提供标准化平台。它将 UI 的不同部分（如应用栏和浮动操作按钮）组合在一起，使应用程序具有连贯的外观和感觉。

示例

The 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(),
            )
        }
    }
}Scaffold.kt

此实现如下所示

An implementation of scaffold that contains simple top and bottom app bars, as well as a floating action button that iterates a counter. The inner content of the scaffold is simple text that explains the component. — **图 1.** 脚手架的实现。

其他资源

应用程序栏