This article explains the use of bottom sheet layout, ModalBottomSheetLayout and BackdropScaffold. We talked about the Scaffold for slot controls in the previous article and these controls are typical of the Scaffold for slot controls.
A: BottomSheetScaffold
Similar to the scaffolding explanation we talked about earlier
Let's start with the code@Composable
@ExperimentalMaterialApi
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) {... }Copy the code- SheetContent The contents of the bottom drawer
- Modifier Modifier explanation
- ScaffoldState BottomSheetScaffoldState, let’s take a look at which states can be controlled
@ExperimentalMaterialApi @Stable class BottomSheetScaffoldState( val drawerState: DrawerState, val bottomSheetState: BottomSheetState, val snackbarHostState: SnackbarHostState ) Copy the code- DrawerState can control the state of the left drawer
- BottomSheetState allows you to control the state of the bottom drawer
- SnackbarHostState Controls the Snackbar status
- TopBar top control, can be used before we talked about TopAppBar TopAppBar explanation
- SnackbarHost is actually a control that sets up a Snackbar control. That Scaffold we talked about in the Snackbar and the snackbarHost property
- FloatingActionButton Floating button we’ve talked about in various button tutorials
- The location of the floatingActionButtonPosition set floatingActionButton button. Is it centered at the bottom or lower right? Half of it will be on top of sheetContent
- SheetGesturesEnabled Whether you can swipe your finger to open and close the bottom drawer
- SheetShape Shape of the bottom drawer
- SheetElevation Shading of bottom drawer
- SheetBackgroundColor Background color of the bottom drawer
- SheetContentColor The content color of the bottom drawer
- SheetPeekHeight is the initial height of the bottom drawer
- DrawerContent The contents of the left drawer like the ModalDrawer we talked about earlier
- DrawerGesturesEnabled Whether the left drawer can be opened and closed by dragging the finger
- DrawerShape The shape of the left drawer
- Shadow in the left drawer of drawerElevation
- DrawerBackgroundColor The background color of the left drawer
- DrawerContentColor The color of the contents of the left drawer
- DrawerScrimColor The color value of the rest of the drawerScrimColor when the left drawer is open
- BackgroundColor backgroundColor of the BottomSheetScaffold control
- ContentColor BottomSheetScaffold contentColor
- Content BottomSheetScaffold control contains content
For example:
@ExperimentalMaterialApi
@Preview()
@Composable
fun bottomSheetScaffoldTest(a) {
val scaffoldState = rememberBottomSheetScaffoldState()
val scope = rememberCoroutineScope()
BottomSheetScaffold(
sheetContent = {
Spacer(modifier = Modifier.height(10.dp))
Text(text = " sheetContent title")
Text(text = " sheetContent content")
Text(text = " sheetContent content2")
Text(text = " sheetContent content3")
Text(text = " sheetContent content4")
Text(text = " sheetContent content5")
Text(text = " sheetContent content6")
Text(text = " sheetContent content7")
Text(text = " sheetContent content8")
Text(text = " sheetContent content9")
Spacer(modifier = Modifier.height(10.dp))
},
modifier = Modifier.fillMaxWidth(),
scaffoldState = scaffoldState,
topBar = { topBarView(scaffoldState) },
// snackbarHost =
floatingActionButton = {
FloatingActionButton(
onClick = {
scope.launch {
if(scaffoldState.bottomSheetState.isCollapsed){
scaffoldState.bottomSheetState.expand()
}else{
scaffoldState.bottomSheetState.collapse()
}
}
}
){
}
},
floatingActionButtonPosition = FabPosition.Center,
sheetGesturesEnabled = true,
sheetShape = RoundedCornerShape(2.dp),
sheetElevation = 8.dp,
sheetBackgroundColor = Color.Red,
sheetContentColor = Color.White,
sheetPeekHeight = 50.dp,
drawerContent = {
drawView()
},
drawerGesturesEnabled = true,
drawerShape = RoundedCornerShape(4.dp),
drawerElevation = 16.dp,
drawerBackgroundColor = Color.White,
drawerContentColor = Color.Black,
drawerScrimColor = DrawerDefaults.scrimColor,
backgroundColor = Color.White,
contentColor = Color.Black
) {
Spacer(modifier = Modifier.height(10.dp))
Text(text = " BottomSheetScaffold title")
Text(text = " BottomSheetScaffold content")
Button(onClick = {
scope.launch {
scaffoldState.snackbarHostState.showSnackbar("Opened up."."Hidden",SnackbarDuration.Short)
}
}) {
Text(text = "Open the SnackBar")}}}@Composable
fun drawView(a){
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalDrawer(
drawerContent = {
Text(text = "ModalDrawer Content",modifier = Modifier
.fillMaxWidth()
.height(200.dp))
},
drawerState = drawerState,
gesturesEnabled = true,
drawerShape = MaterialTheme.shapes.large,
drawerElevation = DrawerDefaults.Elevation,
drawerBackgroundColor = Color.Red,
drawerContentColor = Color.White,
scrimColor = DrawerDefaults.scrimColor
) {
Column() {
Text(text = "ModalDrawer Title")
Text(text = "ModalDrawer Content")
Button(onClick = {
scope.launch {
drawerState.open()
}
}) {
Text(text = "Open")}}}}@ExperimentalMaterialApi
@Composable
fun topBarView(scaffoldState:BottomSheetScaffoldState){
val scope = rememberCoroutineScope()
TopAppBar(
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
backgroundColor = MaterialTheme.colors.primarySurface,
elevation = 4.dp,
contentPadding = AppBarDefaults.ContentPadding
) {
Row(modifier = Modifier.fillMaxWidth(),verticalAlignment = Alignment.CenterVertically) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Back button",
tint = Color.White,
modifier = Modifier
.clickable {
/ / open the drawer
scope.launch {
scaffoldState.drawerState.open()
}
}
.padding(start = 12.dp, end = 12.dp)
.fillMaxHeight()
)
Text(text = "Page title",fontSize = 17.sp,color = Color.White)
}
}
}
Copy the code2: ModalBottomSheetLayout
Let’s look at the ModalBottomSheetLayout code first
@Composable
@ExperimentalMaterialApi
fun ModalBottomSheetLayout(
sheetContent: @Composable ColumnScope. () - >Unit,
modifier: Modifier = Modifier,
sheetState: ModalBottomSheetState =
rememberModalBottomSheetState(ModalBottomSheetValue.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) {... }Copy the code- SheetContent The contents of the bottom drawer
- Modifier modifier
- SheetState Indicates the setting status. Show and hide the bottom drawer The default implementation is rememberModalBottomSheetState (ModalBottomSheetValue. Hidden). ModalBottomSheetValue. Hidden are Hidden, ModalBottomSheetValue. Expanded open, ModalBottomSheetValue. HalfExpanded half open
- SheetShape sets the bottom drawer shape
- SheetElevation sets the shadow of the bottom drawer
- SheetBackgroundColor sets the background color of the bottom drawer
- SheetContentColor Sets the color of the contents of the bottom drawer
- ScrimColor sets the color of the rest of the top when the bottom drawer is open
- Content The content of ModalBottomSheetLayout
For example:
@ExperimentalMaterialApi
@Preview()
@Composable
fun modalBottomSheetLayoutTest(a){
val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
val scope = rememberCoroutineScope()
ModalBottomSheetLayout(
sheetContent = {
Spacer(modifier = Modifier.height(10.dp))
Text(text = " sheetContent title")
Text(text = " sheetContent content")
Text(text = " sheetContent content2")
Text(text = " sheetContent content3")
Text(text = " sheetContent content4")
Text(text = " sheetContent content5")
Text(text = " sheetContent content6")
Text(text = " sheetContent content7")
Text(text = " sheetContent content8")
Text(text = " sheetContent content9")
Spacer(modifier = Modifier.height(10.dp))
},
modifier = Modifier.fillMaxWidth(),
sheetState = sheetState,
sheetShape = RoundedCornerShape(4.dp),
sheetElevation = 16.dp,
sheetBackgroundColor = Color.Red,
sheetContentColor = Color.White,
scrimColor = ModalBottomSheetDefaults.scrimColor)
{
Column {
Spacer(modifier = Modifier.height(10.dp))
Text(text = " ModalBottomSheetLayout title")
Text(text = " ModalBottomSheetLayout content")
Button(onClick = {
scope.launch {
if(sheetState.isVisible) sheetState.hide() else sheetState.show()
}
}) {
Text(text = "Open")
}
Spacer(modifier = Modifier.height(10.dp))
}
}
}
Copy the codeThree: BackdropScaffold
Let’s start with the code
@Composable
@ExperimentalMaterialApi
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) } ) {... }Copy the code- The control at the top of appBar can be explained by the TopAppBar TopAppBar we talked about before
- BackLayerContent Displays masked content behind it
- FrontLayerContent The content displayed in front
- Modifier modifier
- ScaffoldState state. You can set the snackbar status. You can also set the status of BackdropScaffoldState. A BackdropValue. Indicates that the next layer is Concealed but the former layer is activated
(1) BackdropValue.Revealed the next layer to be Revealed and the previous layer to be hidden
- GesturesEnabled Whether you can drag a finger to display and hide the front and rear screens
- PeekHeight Indicates the distance at the top of the interface. It can also be interpreted as the default height displayed on the following interface. Default is 56 dp
- headerHeight
- PersistentAppBar When true, the appBar remains displayed regardless of whether the underlying interface is displayed or hidden. If the value is false, the appBar is hidden when the following screen is displayed
- StickyFrontLayer When set to true, the front screen drops down to the content height of the back screen. When false, the front screen can be pulled down to the bottom of the screen.
- BackLayerBackgroundColor Specifies the background color behind the interface
- BackLayerContentColor Specifies the color of the content behind the interface
- FrontLayerShape The shape of the front interface
- FrontLayerElevation Shadow of the front interface
- The background color of the front frontLayerBackgroundColor interface
- FrontLayerContentColor The color of the content in front of the interface
- FrontLayerScrimColor The blank color reserved at the top when the front screen is pulled down
- SnackbarHost Specifies the host that sets the Snackbar
For example:
@ExperimentalMaterialApi
@Preview()
@Composable
fun backdropScaffoldTest(a){
val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed)
val scope = rememberCoroutineScope()
BackdropScaffold(
appBar = { topBarView(scaffoldState = scaffoldState) },
backLayerContent = {
Column() {
Text(text = "backLayerContent Title")
Text(text = "backLayerContent Content")
Text(text = "backLayerContent Content1")
Text(text = "backLayerContent Content2")
Text(text = "backLayerContent Content3")
Text(text = "backLayerContent Content4")
Text(text = "backLayerContent Content5")
Text(text = "backLayerContent Content6")
Text(text = "backLayerContent Content7")
Text(text = "backLayerContent Content8")
Text(text = "backLayerContent Content9")
Text(text = "backLayerContent Content10")
}
},
frontLayerContent = {
Column() {
Text(text = "frontLayerContent Title")
Text(text = "frontLayerContent Content")
Text(text = "frontLayerContent Content1")
Text(text = "frontLayerContent Content2")
Text(text = "frontLayerContent Content3")
Text(text = "frontLayerContent Content4")
Text(text = "frontLayerContent Content5")
Text(text = "frontLayerContent Content6")
Text(text = "frontLayerContent Content7")
Text(text = "frontLayerContent Content8")
Text(text = "frontLayerContent Content9")
Text(text = "frontLayerContent Content10")
Button(onClick = {
scope.launch {
scaffoldState.snackbarHostState.showSnackbar("Shows the contents of Snackbar."."Hidden",SnackbarDuration.Short)
}}) {
Text(text = "Open the Snackbar")
}
}
},
scaffoldState = scaffoldState,
gesturesEnabled = true,
peekHeight = 48.dp,
persistentAppBar = true,
stickyFrontLayer = true,
backLayerBackgroundColor = Color.Red,
backLayerContentColor = Color.White,
frontLayerShape = BackdropScaffoldDefaults.frontLayerShape,
frontLayerElevation = BackdropScaffoldDefaults.FrontLayerElevation,
frontLayerBackgroundColor = Color.White,
frontLayerContentColor = Color.Black,
frontLayerScrimColor = BackdropScaffoldDefaults.frontLayerScrimColor,
)
}
@ExperimentalMaterialApi
@Composable
fun topBarView(scaffoldState:BackdropScaffoldState){
val scope = rememberCoroutineScope()
TopAppBar(
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
backgroundColor = MaterialTheme.colors.primarySurface,
elevation = 4.dp,
contentPadding = AppBarDefaults.ContentPadding
) {
Row(modifier = Modifier.fillMaxWidth(),verticalAlignment = Alignment.CenterVertically) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Back button",
tint = Color.White,
modifier = Modifier
.clickable {
/ / open the drawer
scope.launch {
if (scaffoldState.isConcealed) scaffoldState.reveal() else scaffoldState.conceal()
}
}
.padding(start = 12.dp, end = 12.dp)
.fillMaxHeight()
)
Text(text = "Page title",fontSize = 17.sp,color = Color.White)
}
}
}
Copy the code