compose——底部弹窗BottomSheetScaffold和ModalBottomSheetLayout
compose
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
项目地址:https://gitcode.com/gh_mirrors/compose/compose
免费下载资源
·
一、底部弹窗BottomSheetScaffold
效果图:
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetExample() {
val scaffoldState = rememberBottomSheetScaffoldState()
val bottomSheetState = scaffoldState.bottomSheetState
val scope = rememberCoroutineScope()
BottomSheetScaffold(
scaffoldState = scaffoldState,
sheetContent = {
Column(modifier = Modifier.padding(16.dp).height(300.dp)) {
Text(text = "This is a bottom sheet")
Button(
onClick = {
// 处理按钮点击事件
scope.launch { bottomSheetState.collapse() }
},
modifier = Modifier.padding(top = 16.dp)
) {
Text(text = "关闭")
}
}
},
sheetPeekHeight = 0.dp
) {
// 页面内容
Button(
onClick = { scope.launch { bottomSheetState.expand() } },
modifier = Modifier.padding(16.dp)
) {
Text(text = "打开底部表单")
}
}
}
二、底部弹窗ModalBottomSheetLayout
ModalBottomSheetLayout 是 Jetpack Compose 中的一个组件,用于创建底部弹窗。它可以在屏幕底部显示一个半透明的背景,并从底部滑出一个内容面板。ModalBottomSheetLayout 包含两个主要部分:背景和内容面板。
效果图:
代码如下:
val modalBottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden )
val coroutineScope =rememberCoroutineScope()
Column {
// 使用ModalBottomSheetLayout包装BottomSheet的内容
ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetContent = {
// BottomSheet的内容
Column {
Text("BottomSheet Content")
Button(onClick = { coroutineScope.launch { modalBottomSheetState.hide() } }) {
Text("Close BottomSheet")
}
}
}
) {
// 主要内容
Button(onClick = {
Log.e("TAG","TTTTT")
coroutineScope.launch { modalBottomSheetState.show() } }) {
Text("弹出 BottomSheet")
}
}
}
GitHub 加速计划 / compose / compose
33.26 K
5.15 K
下载
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
最近提交(Master分支:1 个月前 )
73d3a25e
Signed-off-by: Suleiman Dibirov <idsulik@gmail.com>
2 天前
3524bcfa
Signed-off-by: Suleiman Dibirov <idsulik@gmail.com>
2 天前
更多推荐
已为社区贡献12条内容
所有评论(0)