BottomSheetScaffold
fun BottomSheetScaffold(
sheetContent: @Composable ColumnScope.() -> Unit,
modifier: Modifier = Modifier,
scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
topBar: (@Composable () -> Unit)? = null,
snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
floatingActionButton: (@Composable () -> Unit)? = null,
floatingActionButtonPosition: FabPosition = FabPosition.End,
sheetGesturesEnabled: Boolean = true,
sheetShape: Shape = MaterialTheme.shapes.large,
sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation,
sheetBackgroundColor: Color = MaterialTheme.colors.surface,
sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight,
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
)
- sheetContent 底部抽屉的内容
- drawerState可以去控制左边抽屉的状态
- bottomSheetState 可以去控制底部抽屉的状态
- snackbarHostState 可以控制Snackbar的状态
- topBar 顶部控件
- floatingActionButton 浮动的button
- floatingActionButtonPosition 设置floatingActionButton的按钮的位置。是在底部居中还是再右下角，有一半会盖在sheetContent上面
- sheetGesturesEnabled 是否能通过手指滑动去打开和关闭底部的抽屉
- sheetShape 底部抽屉的形状
- sheetElevation 底部抽屉的阴影
- sheetBackgroundColor 底部抽屉的背景颜色
- sheetContentColor 底部抽屉的内容颜色
- sheetPeekHeight 是底部抽屉的初始的高度
- drawerContent 左边抽屉的内容
- drawerGesturesEnabled 是否能通过手指拖动的形式去打开和关闭左边的抽屉
- drawerShape 左边抽屉的形状
- drawerElevation 左边抽屉的阴影
- drawerBackgroundColor 左边抽屉的背景颜色
- drawerContentColor 左边抽屉的内容的颜色
- drawerScrimColor 左边抽屉打开的时候，右边剩余部分的颜色值
- backgroundColor BottomSheetScaffold控件的背景颜色
- contentColor BottomSheetScaffold控件的内容的颜色
- content BottomSheetScaffold控件包含的内容
ModalBottomSheetLayout
fun ModalBottomSheetLayout(
sheetContent: @Composable ColumnScope.() -> Unit,
modifier: Modifier = Modifier,
sheetState: ModalBottomSheetState =
rememberModalBottomSheetState(Hidden),
sheetShape: Shape = MaterialTheme.shapes.large,
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
sheetBackgroundColor: Color = MaterialTheme.colors.surface,
sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
content: @Composable () -> Unit
)
- sheetContent 底部抽屉的内容
- modifier 修饰符
- sheetState 设置状态。显示和隐藏底部抽屉
- 默认实现是rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)。
- ModalBottomSheetValue.Hidden是隐藏
- ModalBottomSheetValue.Expanded打开
- ModalBottomSheetValue.HalfExpanded 打开一半
- sheetShape 设置底部抽屉形状
- sheetElevation 设置底部抽屉的阴影
- sheetBackgroundColor 设置底部抽屉的背景颜色
- sheetContentColor 设置底部抽屉内容的颜色
- scrimColor 设置底部抽屉打开的时候，顶部剩余部分的颜色
- content ModalBottomSheetLayout的内容
BackdropScaffold
fun BackdropScaffold(
appBar: @Composable () -> Unit,
backLayerContent: @Composable () -> Unit,
frontLayerContent: @Composable () -> Unit,
modifier: Modifier = Modifier,
scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed),
gesturesEnabled: Boolean = true,
peekHeight: Dp = BackdropScaffoldDefaults.PeekHeight,
headerHeight: Dp = BackdropScaffoldDefaults.HeaderHeight,
persistentAppBar: Boolean = true,
stickyFrontLayer: Boolean = true,
backLayerBackgroundColor: Color = MaterialTheme.colors.primary,
backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),
frontLayerShape: Shape = BackdropScaffoldDefaults.frontLayerShape,
frontLayerElevation: Dp = BackdropScaffoldDefaults.FrontLayerElevation,
frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,
frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),
frontLayerScrimColor: Color = BackdropScaffoldDefaults.frontLayerScrimColor,
snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }
)
appBar 顶部的控件，
backLayerContent 显示在后面被遮挡的内容
frontLayerContent 显示在前面的内容
modifier 修饰符
scaffoldState 状态。可以设置snackbar的状态。还可以设置BackdropScaffoldState的状态。有BackdropValue.Concealed. 表示隐藏了后一层，而激活了前一层
跟BackdropValue.Revealed 表示后一层显示，前一层隐藏
gesturesEnabled 可否可用通过手指拖动的形式显示和隐藏前后界面
peekHeight 前面的界面举例顶部的距离，也可以理解成后面的界面默认露出显示的高度。默认是56dp
headerHeight
persistentAppBar 当为true的时候，不管显示还是隐藏后面的界面，appBar都一直显示的。如果值为false，则显示后面的界面的时候，appBar会隐藏
stickyFrontLayer 当为true的时候，前面的界面之后下拉到后面界面的内容高度位置。为false 的时候，前面的界面可以一直下拉到屏幕底部（试试效果就知道）
backLayerBackgroundColor 后面界面的背景颜色
backLayerContentColor 后面界面的内容的颜色
frontLayerShape 前面界面的形状
frontLayerElevation 前面界面的阴影
frontLayerBackgroundColor 前面界面的背景颜色
frontLayerContentColor 前面界面的内容的颜色
frontLayerScrimColor 前面界面下拉时，顶部预留出来的空白的颜色
snackbarHost 设置Snackbar的
TopAppBar
fun TopAppBar(
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = AppBarDefaults.TopAppBarElevation,
contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)
backgroundColor 背景颜色
contentColor 内容的颜色
elevation 阴影
contentPadding 内容边距
可通过PaddingValue设置，也可使用默认AppBarDefaults.ContentPadding
content 内容控件
BottomAppBar
fun BottomAppBar(
modifier: Modifier = Modifier,
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
cutoutShape: Shape? = null,
elevation: Dp = AppBarDefaults.BottomAppBarElevation,
contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)
backgroundColor 背景颜色
contentColor 内容的颜色
cutoutShape 形状
elevation 阴影
contentPadding 内容边距
可通过PaddingValue设置，也可使用默认AppBarDefaults.ContentPadding
content 内容控件
Snackbar
fun Snackbar(
modifier: Modifier = Modifier,
action: @Composable (() -> Unit)? = null,
actionOnNewLine: Boolean = false,
shape: Shape = MaterialTheme.shapes.small,
backgroundColor: Color = SnackbarDefaults.backgroundColor,
contentColor: Color = MaterialTheme.colors.surface,
elevation: Dp = 6.dp,
content: @Composable () -> Unit
)
modifier 修饰符
action 行为的内容是什么控件
actionOnNewLine 表示action内容是否在新的一行，为true为另为一行，否则会和content的内容叠在一起
shape形状 默认是MaterialTheme.shapes.small 也就是RoundedCornerShape(4.dp)
backgroundColor 设置背景颜色
contentColor 设置内容的颜色
elevation设置阴影
content 内容是什么控件
ModalDrawer
fun ModalDrawer(
drawerContent: @Composable ColumnScope.() -> Unit,
modifier: Modifier = Modifier,
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
gesturesEnabled: Boolean = true,
drawerShape: Shape = MaterialTheme.shapes.large,
drawerElevation: Dp = DrawerDefaults.Elevation,
drawerBackgroundColor: Color = MaterialTheme.colors.surface,
drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
scrimColor: Color = DrawerDefaults.scrimColor,
content: @Composable () -> Unit
)
drawerContent 左边的内容
modifier 修饰符 Modifier用法详解
drawerState ModalDrawer的状态 有DrawerValue.open打开，DrawerValue.Closed关闭
gesturesEnabled 是否支持手势去打开和关闭抽屉
drawerShape 形状
drawerElevation 阴影
drawerBackgroundColor 背景颜色
drawerContentColor 内容的颜色
scrimColor 当左边drawer控件显示的时候，右边余留出来的颜色
BottomDrawercontent ModalDrawer的内容
BottomDrawer
fun BottomDrawer(
drawerContent: @Composable ColumnScope.() -> Unit,
modifier: Modifier = Modifier,
drawerState: BottomDrawerState = rememberBottomDrawerState(BottomDrawerValue.Closed),
gesturesEnabled: Boolean = true,
drawerShape: Shape = MaterialTheme.shapes.large,
drawerElevation: Dp = DrawerDefaults.Elevation,
drawerBackgroundColor: Color = MaterialTheme.colors.surface,
drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
scrimColor: Color = DrawerDefaults.scrimColor,
content: @Composable () -> Unit
)
drawerContent 底部抽屉的内容
modifier 修饰符
drawerState 抽屉的状态，BottomDrawerValue.Open 打开一半
BottomDrawerValue.Closed 关闭，BottomDrawerValue.Expanded 是完全打开
gesturesEnabled 是否支持手势去打开和关闭抽屉
drawerShape 抽屉形状
drawerElevation 抽屉阴影
drawerBackgroundColor 抽屉背景颜色
drawerContentColor 抽屉内容颜色
scrimColor 抽屉打开时候，顶部剩余空间的颜色
content BottomDrawer的内容