该博客基于：compose_version = '1.1.0-beta01'

脚手架实现了Material设计的页面基本结构。该组件通过确保其适当的布局策略从而将其他的多个组件组合在一起构成页面，包括标题栏、底部栏、SnackBar（类似Toast功能）、浮动按钮、抽屉组件、剩余内容布局等

Scaffold

首先来看看参数：

Scaffold(modifier: Modifier = Modifier,//布局修饰scaffoldState: ScaffoldState = rememberScaffoldState(),//脚手架状态（例如控件抽屉是否打开）topBar: @Composable () -> Unit = {},//屏幕顶部的标题栏bottomBar: @Composable () -> Unit = {},//屏幕底部的标题栏snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },//用来展示SnackBar的一个组件floatingActionButton: @Composable () -> Unit = {},//悬浮按钮floatingActionButtonPosition: FabPosition = FabPosition.End,//    悬浮按钮在屏幕上的位置isFloatingActionButtonDocked: Boolean = false,//    如果存在BottomBar，那么是否与BottomBar重叠一半的高度drawerContent: @Composable (ColumnScope.() -> Unit)? = null,//   抽屉组件中的内容drawerGesturesEnabled: Boolean = true,//否允许手势控制抽屉的打开和关闭drawerShape: Shape = MaterialTheme.shapes.large,//抽屉组件的形状drawerElevation: Dp = DrawerDefaults.Elevation,//抽屉组件的阴影高度drawerBackgroundColor: Color = MaterialTheme.colors.surface,//抽屉组件的背景色drawerContentColor: Color = contentColorFor(drawerBackgroundColor),//抽屉组件内容的背景色drawerScrimColor: Color = DrawerDefaults.scrimColor,//抽屉组件打开时屏幕剩余部分的遮盖颜色backgroundColor: Color = MaterialTheme.colors.background,//脚手架组件的背景色contentColor: Color = contentColorFor(backgroundColor),//脚手架组件内容的背景色content: @Composable (PaddingValues) -> Unit//脚手架中的组件
)

简单使用：

@Composable
fun ScaffoldTest() {val scaffoldState = rememberScaffoldState()val scope = rememberCoroutineScope()Scaffold(scaffoldState = scaffoldState,drawerContent = {//抽屉组件Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {Text(text = "抽屉组件中内容")}},topBar = {//屏幕顶部的标题栏TopAppBar(title = { Text("脚手架") },navigationIcon = {IconButton(onClick = {scope.launch { scaffoldState.drawerState.open() }}) {Icon(Icons.Filled.Menu, contentDescription = null)}})},floatingActionButton = {//悬浮按钮ExtendedFloatingActionButton(text = { Text("悬浮按钮") },onClick = {scope.launch { scaffoldState.snackbarHostState.showSnackbar("点击了悬浮按钮") }})},floatingActionButtonPosition = FabPosition.End,//悬浮按钮在屏幕中的位置content = {//屏幕内容Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {Text(text = "屏幕内容区域")}})}

效果如图：

Snackbar

在上面的示例中在底部按钮的点击事件上增加了SnackBar的通知显示，Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件，用来代替 Toast ，Snackbar与Toast的主要区别是：Snackbar可以处理用户交互事件，先来看看参数：

Snackbar(modifier: Modifier = Modifier,//布局修饰action: @Composable (() -> Unit)? = null,//动作actionOnNewLine: Boolean = false,//action是否应该放在单独的行上shape: Shape = MaterialTheme.shapes.small,//Snackbar的形状和阴影  backgroundColor: Color = SnackbarDefaults.backgroundColor,//背景颜色contentColor: Color = MaterialTheme.colors.surface,//内容颜色elevation: Dp = 6.dp,//阴影效果content: @Composable () -> Unit//内容
)
Snackbar(snackbarData: SnackbarData,//通过SnackbarHostState显示的关于当前snackbar的数据modifier: Modifier = Modifier,//布局修饰actionOnNewLine: Boolean = false,//action是否应该放在单独的行上shape: Shape = MaterialTheme.shapes.small,//Snackbar的形状和阴影  backgroundColor: Color = SnackbarDefaults.backgroundColor,//背景颜色contentColor: Color = MaterialTheme.colors.surface,//内容颜色actionColor: Color = SnackbarDefaults.primaryActionColor,//动作颜色elevation: Dp = 6.dp//阴影效果
)

在原来的Scaffold的demo基础之上增加snackbarHost定义Snackbar：

@Composable
fun ScaffoldTest() {val scaffoldState = rememberScaffoldState()val scope = rememberCoroutineScope()Scaffold(scaffoldState = scaffoldState,drawerContent = {//抽屉组件Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {Text(text = "抽屉组件中内容")}},topBar = {//屏幕顶部的标题栏TopAppBar(title = { Text("脚手架") },navigationIcon = {IconButton(onClick = {scope.launch { scaffoldState.drawerState.open() }}) {Icon(Icons.Filled.Menu, contentDescription = null)}})},floatingActionButton = {//悬浮按钮ExtendedFloatingActionButton(text = { Text("悬浮按钮") },onClick = {scope.launch {scaffoldState.snackbarHostState.showSnackbar("点击了悬浮按钮")}})},floatingActionButtonPosition = FabPosition.End,//悬浮按钮在屏幕中的位置content = {//屏幕内容Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {Text(text = "屏幕内容区域")}},snackbarHost = {SnackbarHost(it) { data ->Snackbar(snackbarData = data,backgroundColor = Color.Blue,contentColor = Color.White,shape = RoundedCornerShape(10.dp))}})}

效果如图：

Jetpack Compose——Scaffold（脚手架）、SnackBar（通知，类似Toast）的简单使用相关推荐

Jetpack Compose——DropdownMenu（下拉菜单）的简单使用
基于compose_version=1.1.0-beta01版本参数如下: DropdownMenu(expanded: Boolean,//菜单栏状态onDismissRequest: () -& ...
结合Navigation组件实现JetPack Compose的界面导航
Android JetPack Compose可以利用Navigation组件来实现导航一.Navigation组件的配置新建项目,选择Empty Compose Activity. 然后,在项目 ...
Android JetPack Compose组件中Scaffold的应用
一. 创建Activity Empty Compose模块在Android Studio中创建一个新的项目,选择一个Empty Compose Activity,如下图所示: 二.搭建Scaffol ...
Jetpack Compose入门详解（实时更新）
Jetpack Compose入门详解前排提醒前言(Compose是什么) 1.实战准备一.优势与缺点二.前四课三.标准布局组件 1.Column 2.Row 3.Box 四.xml和com ...
Jetpack Compose 中的架构思想
Jetpack Compose 中的架构总览如果应用打算使用 Jetpack Compose 来开发,那么就可以跟以前的MVC.MVP.MVVM等乱七八糟的架构全部说拜拜,这些名词也将在Androi ...
Jetpack Compose
Jetpack Compose:声明式UI框架 (Composition over inheritance) 组合优于继承 1. 什么是Compose,有什么优势? Jetpack Compose 是 ...
Android JetPack Compose初步1
一.为什么要使用JetPack Compose? 1.Android视图层次结构存在的问题由于应用的状态会因用户交互等因素而发生变化,因此界面层次结构需要进行更新以显示当前数据.在更新时会改变 wi ...
jetpack compose原理解析
目录 jetpack compose原理解析 jetpack compse 声明式ui开发原理分析整体框架介绍 compose LayoutNode布局介绍 @Composeable注解实现细节 ...
Jetpack Compose中的Modifier
Modifier的基本使用 Modifier修饰符是Jetpack Compose中用来修饰组件的,提供常用的属性,写布局时几乎所有Composable组件的大部分属性都可以用Modifier 来修饰 ...

Jetpack Compose——Scaffold（脚手架）、SnackBar（通知，类似Toast）的简单使用

Scaffold

Snackbar

Jetpack Compose——Scaffold（脚手架）、SnackBar（通知，类似Toast）的简单使用相关推荐

最新文章

热门文章