Scaffold 脚手架

2024-03-02 14:04

文章标签 脚手架 scaffold

本文主要是介绍Scaffold 脚手架，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Scaffold 脚手架

Scaffold 脚手架组件是一个核心组件，它为开发者提供了一个标准的、可定制的应用界面框架。androidx.compose.material3.Scaffold 包含了应用界面的基础元素，如状态栏、导航栏、顶部应用栏（TopAppBar）等。通过 Scaffold，开发者可以轻松地为应用添加这些常见组件，并对其进行自定义。

Scaffold 特点

内置组件：Scaffold 内置了状态栏、导航栏等常见组件，开发者只需简单地配置参数就可以使用。
易于定制：Scaffold 虽然提供了默认的配置，但开发者可以轻松地自定义这些组件的外观和行为。
高度灵活：Scaffold 的设计允许开发者在需要时添加或删除组件，使其能够高度适应不同的应用需求。

Scaffold 声明及参数

@Composable
fun Scaffold(modifier: Modifier = Modifier,topBar: @Composable () -> Unit = {},bottomBar: @Composable () -> Unit = {},snackbarHost: @Composable () -> Unit = {},floatingActionButton: @Composable () -> Unit = {},floatingActionButtonPosition: FabPosition = FabPosition.End,containerColor: Color = MaterialTheme.colorScheme.background,contentColor: Color = contentColorFor(containerColor),contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,content: @Composable (PaddingValues) -> Unit
): Unit

参数名	描述
modifier	用于修改 `Scaffold` 的布局属性，比如大小、位置等。默认是 `Modifier`，表示没有任何额外修饰。
topBar	用于定义应用的顶部栏，通常是一个 `TopAppBar`。
bottomBar	用于定义应用的底部导航栏，可以是一个 `BottomAppBar` 或其他自定义组件。
floatingActionButton	用于定义浮动的操作按钮，通常是一个 `FloatingActionButton`。
floatingActionButtonPosition	定义浮动按钮的位置，如 `FabPosition.End`，`FabPosition.Center`， `FabPosition.Start` 或 `FabPosition.EndOverlay`。
snackbarHost	定义 `Snackbar` 的显示位置，通常用于显示简短的提示信息。
containerColor	定义 `Scaffold` 容器的背景颜色。默认是 `MaterialTheme.colorScheme.background`，即 Material 主题的颜色方案中的背景颜色。
contentColor	定义 `Scaffold` 内容区域的颜色。默认是 `contentColorFor(containerColor)`，该函数会根据容器颜色自动选择一个合适的内容颜色。
contentWindowInsets	定义窗口内边距，这些内边距通常用于考虑系统界面元素（如状态栏、导航栏）的空间。默认是 `ScaffoldDefaults.contentWindowInsets`。
content	一个可组合函数，接受 `PaddingValues` 参数，用于定义 `Scaffold` 的主要内容。这个函数是必需的，因为它定义了用户在应用中看到的主界面。

Scaffold 运行示例

下例是 Scaffold 的使用及运行结果。

@Composable
fun ScaffoldDemo() {Scaffold(topBar = {// 定义顶部应用栏的内容TopAppBar(title = { Text("顶部标题栏") })},bottomBar = {// 定义底部应用栏的内容BottomAppBar( containerColor = Color.Blue,contentColor = Color.White,) {Text(modifier = Modifier.fillMaxWidth(), text = "底部导航栏", fontSize = 20.sp, textAlign = TextAlign.Center)}},floatingActionButton = {// 定义浮动操作按钮的内容FloatingActionButton(onClick = {}) {Icon(imageVector = Icons.Default.Add, contentDescription = "Add")}},floatingActionButtonPosition = FabPosition.Center,containerColor = Color.LightGray,contentColor = Color.Red,content = { paddingValues ->// 定义主要内容，可以使用 paddingValues 来添加内边距Box(modifier = Modifier.fillMaxSize().padding(paddingValues)) {Text(modifier=Modifier.fillMaxSize(), text = "主界面", fontSize = 24.sp, textAlign = TextAlign.Center)}})
}