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