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)}})
}
