在 Jetpack Compose 中使用 BottomDrawer

news2024/10/5 19:10:53

简介

Jetpack Compose 是一个现代化的，声明式的 UI 工具包，它让我们可以更方便地构建原生 Android UI。在本篇文章中，我们将会讨论如何在 Jetpack Compose 中使用 BottomDrawer。

什么是 BottomDrawer?

BottomDrawer 是一种 UI 元素，通常被用来存放应用的导航控件或者提供一些与当前内容相关的额外操作。如同字面意思，它会从屏幕底部滑出，覆盖屏幕的一部分。

如何使用 BottomDrawer

使用 BottomDrawer 的方法相对简单。我们需要使用 ModalDrawerLayout 的 BottomDrawer 函数。下面是一个简单的例子：

@OptIn(ExperimentalMaterialApi::class)
@Preview
@Composable
fun MyScreen2(){
    val drawerState =rememberBottomDrawerState(BottomDrawerValue.Closed)
    val coroutineScope =rememberCoroutineScope()
    
    BottomDrawer(
        drawerState=drawerState, 
        gesturesEnabled = true,
        modifier = Modifier.fillMaxWidth(),
        drawerContent = {
        ListContent()
    }, content = {
        MainContent { coroutineScope.launch { drawerState.open() }}
        }) 
}

@Composable
fun MainContent(onClick: () -> Unit) {
    Button(onClick = onClick){
        Text(text = "Open Drawer")
    }
}

@Composable
fun ListContent() {
    LazyColumn { 
        items(100){
            Text(text = "Item  22222222222222222222222222222222222222222222222222222222222222222222222 $it")
        }
    }
}

在上述代码中，我们首先创建了一个 drawerState 来保存抽屉的状态（打开或关闭）。然后，在 BottomDrawer 中，我们提供了 drawerContent 和 content 两个参数。drawerContent 是在抽屉打开时显示的内容，而 content 是主屏幕内容。

我们还添加了一个按钮在 MainContent，当点击按钮时，抽屉会打开。需要注意的是，打开和关闭抽屉需要在协程中进行，因此我们创建了一个 coroutineScope。

ListContent 是我们在抽屉中显示的内容，这可以是任何你需要的 Composable。