In this article we will talk about the usage of ModalDrawer, BottomDrawer, BottomNavigation, and ListItem.

A: ModalDrawer

The left drawer control is similar to the DrawLayout control. Let’s look at the code first. We talked about this when Scaffold paints the left drawer control. Scaffold on

@Composable
@OptIn(ExperimentalMaterialApi::class)
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) {... }Copy the code
  • DrawerContent The content on the left
  • Modifier Detailed explanation of the use of modifier
  • DrawerState The DrawerValue. Open is enabled, and the DrawerValue.Closed is Closed
  • GesturesEnabled Whether gestures are supported to open and close drawers
  • DrawerShape shape
  • DrawerElevation shadow
  • DrawerBackgroundColor Background color
  • DrawerContentColor Specifies the color of the content
  • ScrimColor The color left on the right when the left drawer control is displayed
  • Content Content of the ModalDrawer

For example:

@Preview()
@Composable
fun modalDrawerTest(a){
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    ModalDrawer(
        drawerContent = {
            Text(text = "ModalDrawer Content",modifier = Modifier.fillMaxWidth().height(200.dp))
        },
        // 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")}}}}Copy the code

2: BottomDrawer

Bottom drawer, let’s look at the code first

@Composable
@ExperimentalMaterialApi
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) {... }Copy the code
  • DrawerContent The contents of the bottom drawer
  • Modifier modifier
  • DrawerState drawer, BottomDrawerValue. Open Open half BottomDrawerValue. Closed Closed, BottomDrawerValue. Expanded is fully Open
  • GesturesEnabled Whether gestures are supported to open and close drawers
  • DrawerShape drawerShape
  • DrawerElevation Drawer shadows
  • DrawerBackgroundColor drawerBackgroundColor
  • DrawerContentColor drawerContentColor
  • ScrimColor drawer opens with the color of the remaining space on top
  • Content The content of the BottomDrawer

For example:

@ExperimentalMaterialApi
@Preview()
@Composable
fun bottomDrawerTest(a){
    val drawerState = rememberBottomDrawerState(BottomDrawerValue.Open)
    val scope = rememberCoroutineScope()
    BottomDrawer(
        drawerContent = {
            Text(text = "Bottom Drawer Content",modifier = Modifier
                .fillMaxWidth()
                .height(600.dp))
        },
// 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 = "BottomDrawer Title")
           Text(text = "BottomDrawer Content")
           Button(onClick = {
               scope.launch {
                   drawerState.expand()
               }
           }) {
               Text(text = "Open")}}}}Copy the code

Three: BottomNavigation

So let’s look at the code for BottomNavigation

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit) {... }Copy the code
  • Modifier modifier
  • BackgroundColor backgroundColor
  • ContentColor Specifies the color of the content
  • Elevation shadow
  • The content content

Example: We also used it to implement 5 tabs.

@Preview()
@Composable
fun bottomNavigationTest(a){
    val posState = remember {
        mutableStateOf(0)
    }
    BottomNavigation(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp),
        backgroundColor = Color.White,
        contentColor = Color.Black,
        elevation = 6.dp
    ) {
        val modifier = Modifier
            .fillMaxHeight()
            .weight(1f.true)
        tabItemView(0,modifier,posState)
        tabItemView(1,modifier,posState)
        tabItemView(2,modifier,posState)
        tabItemView(3,modifier,posState)
        tabItemView(4,modifier,posState)
    }
}

@Composable
fun tabItemView(pos:Int,modifier: Modifier,posState:MutableState<Int>){
    Column(
        modifier=modifier.clickable {
            posState.value = pos
        }
        ,horizontalAlignment = Alignment.CenterHorizontally
        ,verticalArrangement = Arrangement.Center
    ) {
        val imageVector = when(pos){
            0->Icons.Filled.Home
            1->Icons.Filled.Message
            2->Icons.Filled.Domain
            3->Icons.Filled.Favorite
            else->Icons.Filled.Person
        }

        val message = when(pos){
            0->"Home page"
            1->"News"
            2->"Building"
            3->"Like"
            else->"I"
        }

        Icon(imageVector = imageVector, contentDescription = message,tint = if(posState.value == pos) Color.Blue else Color.Black)
        Text(text = message,fontSize = 10.sp,color = if(posState.value == pos) Color.Blue else Color.Black)
    }
}
Copy the code

Four ListItem

ListItem is also a fixed slot control provided by Material, so let’s look at its code.

@Composable
@ExperimentalMaterialApi
fun ListItem(
    modifier: Modifier = Modifier,
    icon: @Composable(() - >Unit)? = null,
    secondaryText: @Composable(() - >Unit)? = null,
    singleLineSecondaryText: Boolean = true,
    overlineText: @Composable(() - >Unit)? = null,
    trailing: @Composable(() - >Unit)? = null,
    text: @Composable() - >Unit
){... }Copy the code
  • Modifier modifier
  • Icon is the control displayed on the left
  • OverlineText displays in the first small font control
  • Text is displayed in the second text control
  • SecondaryText displays in the third text control
  • SingleLineSecondaryText Sets whether secondaryText is singleLine
  • Trailing is displayed in the right control

Example: when the code runs, you can clearly know the meaning of each attribute. This is just to get us through the fixed slots. Give us a control to quickly create a list of items

@ExperimentalMaterialApi
@Preview()
@Composable
fun listItemTest(a){
    ListItem(
        modifier = Modifier
            .fillMaxWidth().wrapContentHeight(),
        icon = {
            Icon(imageVector = Icons.Filled.Home, contentDescription = "home")
        },
        text = {
            Text(text = "List Item")
        },
        secondaryText = {
            Text(text = "List secondaryText List secondaryText")
        },
        singleLineSecondaryText = true,
        overlineText = {
            Text(text = "List overlineText")
        },
        trailing = {
            Icon(imageVector = Icons.Filled.Home, contentDescription = "trailing home")})}Copy the code