Jetpack Compose的ModalDrawer,BottomDrawer,BottomNavigation，ListItem等用法

这篇文章我们会讲下ModalDrawer，BottomDrawer，BottomNavigation，ListItem的用法。

一：ModalDrawer

这个左边抽屉控件，类似以前的DrawLayout，先来看看代码。这个我们在讲到Scaffold绘制左边抽屉控件的时候有讲到。Scaffold讲解

@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
) {
    ...
}
复制代码

• drawerContent 左边的内容
• modifier 修饰符 Modifier用法详解
• drawerState ModalDrawer的状态 有DrawerValue.open打开，DrawerValue.Closed关闭
• gesturesEnabled 是否支持手势去打开和关闭抽屉
• drawerShape 形状
• drawerElevation 阴影
• drawerBackgroundColor 背景颜色
• drawerContentColor 内容的颜色
• scrimColor 当左边drawer控件显示的时候，右边余留出来的颜色
• content ModalDrawer的内容

举例：

@Preview()
@Composable
fun modalDrawerTest(){
    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 = "打开")
            }
        }
    }
}
复制代码

二：BottomDrawer

底部的抽屉，先来看看代码

@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
){
...}
复制代码

• drawerContent 底部抽屉的内容
• modifier 修饰符
• drawerState 抽屉的状态，BottomDrawerValue.Open 打开一半 BottomDrawerValue.Closed 关闭，BottomDrawerValue.Expanded 是完全打开
• gesturesEnabled 是否支持手势去打开和关闭抽屉
• drawerShape 抽屉形状
• drawerElevation 抽屉阴影
• drawerBackgroundColor 抽屉背景颜色
• drawerContentColor 抽屉内容颜色
• scrimColor 抽屉打开时候，顶部剩余空间的颜色
• content BottomDrawer的内容

举例：

@ExperimentalMaterialApi
@Preview()
@Composable
fun bottomDrawerTest(){
    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 = "打开")
           }
       }
    }
}
复制代码

三：BottomNavigation

来看看BottomNavigation的代码

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
){...}
复制代码

• modifier 修饰符
• backgroundColor 背景颜色
• contentColor 内容的颜色
• elevation 阴影
• content 内容

举例：我们也用它去实现5个tab。

@Preview()
@Composable
fun bottomNavigationTest(){
    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->"首页"
            1->"消息"
            2->"建筑"
            3->"喜欢"
            else->"我的"
        }

        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)
    }
}
复制代码

四 ListItem

ListItem 也是Material提供的固定槽位的那种控件，我们来看看它的代码。

@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
){...}
复制代码

• modifier 修饰符
• icon 显示在左边的控件
• overlineText 显示在第一个小字体的控件
• text 显示在第二个的文本控件
• secondaryText 显示在第三个的文本控件
• singleLineSecondaryText 设置secondaryText是否为singleLine
• trailing 显示在右边的控件

举例：代码运行起来大家就能很清楚的知道各个属性的含义。这个是为了让我们通过固定槽位的方式。给我们快速的创建出列表的Item使用的控件

@ExperimentalMaterialApi
@Preview()
@Composable
fun listItemTest(){
    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")
        }
    )
}
复制代码